[React] react-router 설치 및 세팅

사용하기

1. 설치

• npm

npm install react-router-dom@6

 

 

🐳 App.js 로 돌아가서

import {BrowserRouter} from "react-router-dom";

 

🐳  App.js 페이지

import "./App.css"
import {BrowserRouter} from "react-router-dom";

function App() {
    return (
        <BrowserRouter> <== 이걸로 감싸줘야 라우터기능 작동
        <div className="App">
            <h2>App.js</h2>
        </div>
        </BrowserRouter> <== 이걸로 감싸줘야 라우터기능 작동
    );
}

export default App;

 

 

🐳  4가지의 페이지를 생성

 

 

🐳   App.js 진입

 

import "./App.css"
import {BrowserRouter, Route, Routes} from "react-router-dom";

import RouterTests from './components/RouterTest'
import Home from "./pages/Home"
import New from "./pages/New";
import Edit from "./pages/Edit";
import Diary from "./pages/Diary";

function App() {
    return (
        <BrowserRouter>
        <div className="App">
            <h2>App.js</h2>
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/new' element={<New />} />
                <Route path='/edit' element={<Edit />}/>
                <Route path='diary' element={<Diary />}/>
            </Routes>
            <RouterTests />
        </div>
        </BrowserRouter>
    );
}

export default App;

 

🐳  페이지 추가

import RouterTests from './components/RouterTest'
import Home from "./pages/Home"
import New from "./pages/New";
import Edit from "./pages/Edit";
import Diary from "./pages/Diary";


페이지 import 해주기

 

🐳  라우는 경로 추가

  <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/new' element={<New />} />
                <Route path='/edit' element={<Edit />}/>
                <Route path='diary' element={<Diary />}/>
            </Routes>

 

 

🐳   컴포넌트 추가

import {Link} from "react-router-dom";

const RouterTest = () => {
    return <>
        <Link to={'/'}>Home</Link>
        <br/>
        <Link to={'/diary'}>DIARY</Link>
        <br/>
        <Link to={'/new'}>NEW</Link>
        <br/>
        <Link to={'/edit'}>EDIT</Link>
        <br/>
    </>
}

export  default  RouterTest;