사전준비

라우터-돔 설치하기 : $ npm install react-router-dom

최상위 컴포넌트에서 BrowserRouter로 감싸준다.

/index.js
import ReactDOM from 'react-dom';
import App from './App';
import {BrowserRouter} from 'react-router-dom'
ReactDOM.render(
  <BrowserRouter>
      <App />
  </BrowserRouter>,
  document.getElementById('root')
);

Router 사용하기

/App.js
import Gugudan from './Gugudan';
import WordGame from './WordGame'
import {Route,Routes} from 'react-router-dom'

function App() {
  return (
    <Routes>
      <Route path="/" element={<Gugudan/>}/>
      <Route path="/wordgame" element={<WordGame/>}/>
    </Routes>
  );
}

export default App;

switch가 없어지고 Routes로 대체되었다.

routes로 겉을 감싸준 다음

<Route> 로 경로를 지정하고 element에 컴포넌트 작성

Link 만들기

import {Link} from 'react-router-dom'
<Link to ="/"> 구구단 </Link>
<Link to="/wordgame">끝말잇기</Link>

스타일링

Link는 a 태그 처럼 사용 가능하다.

a {
  text-decoration: none;
  color: green;
}
a:hover {
  color: red;
  transition: 0.5s ease-in;
}

Routes 따로 만들어주기

방대한 양의 Route 들을 관리하는 방법으로 path와 element들을 다른 컴포넌트로 이동 시킨다.

/App.js
<Routes>
  <Route path="/" element={<Gugudan/>}/>
  <Route path="/wordgame" element={<WordGame/>}/>
  <Route path="/baseball" element={<Baseball/>}/>
  <Route path="/usercheck" element={<UserCheck/>}/>
  <Route path="/rock" element={<Rock/>}/>
  <Route path="/users" element={<Users/>}/>
</Routes>

/routes.js
import Gugudan from "./Gugudan"
...
export default [
  {
    path:'/',
    component:Gugudan,
    name:'구구단',
  },
 ...
  {
    path:'/users',
    component:Users,
    name:'유저들 정보'
  },
]

function App() {
  return (
    <UserStore>
      <div className='App'>
        <div className='navbar'>
          {routes.map(route=>{return(
            <span>
              <Link to={route.path}>
                {route.name}&nbsp;&nbsp; 
              </Link>
            </span>  
          )})}
        </div>
        <hr/>
        <Routes>
          {routes.map(route=>{
          return (
          <Route
            key={route.path}
            path={route.path}
            element= {<route.component/>}
          />)})}
        </Routes>
      </div>
    </UserStore>
  );
}

nav 바와 Route 에서 각각 map을 이용해서 사용 가능하다.