[React] 라우트 설정하기.

 

 

1. 라우트 설치하기 

npm i react-router-dom

2. index.js에서 BrowserRouter 설정

index.js 파일에서 라우터가 이 앱을 인식하고 url변화를 감시하도록 만든다!!

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom'

import './index.css';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

 

3. App.js에서 라우터 경로 설정하기

App.js에서 

import { Route } from 'react-router-dom'

Route는 URL내의 각자의 다른 경로를 정의하고, 또 각 경로별로 어떤 컴포넌트를 로딩할 것인지 결정한다.

: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

이런 에러가 났다.... 라우터 사용법이 살짝 변경된 것 같다!!  Routes 태그 안에 Route태그를 사용해야 하고, element 요소에 컴포넌트를 할당해줘야 하는 것 같다. 

import { Routes, Route } from 'react-router-dom'

import AllMeetupPage from './pages/AllMeetup';
import NewMeetupPage from './pages/NewMeetup';
import FavoritesPage from './pages/Favorites';

function App() {
  return <div>
    <Routes>
      <Route path='/' element={<AllMeetupPage />} />
      <Route path='/new-meetup' element={<NewMeetupPage />} />
      <Route path='/favorites' element={<FavoritesPage />} />
    </Routes> 
  </div>;
}

export default App;

 

4. 참고: 가지고 오는 컴포넌트 구조!

컴포넌트의 기본적인 구조는 다음과 같다 

function NewMeetupPage() {
  return <div>All Meetups Page</div>
}

export default NewMeetupPage;

 

5. 참고한 영상 

5-1. React router switch

switch : 원래는 routers 대신 switch를 사용했다고 한다.  switch를 사용할 때는 posts 페이지보다 특정한 페이지인 posts/:id의 경우  posts 페이지보다 위에 위치시켜야 한다고 한다!!  혹은  exact  요소를 넣어줬어야 했다. 

<BrowserRouter>
    <Header/>
    <div className="container">
      <Switch>
        <Route path="/posts/:id"component={PostItem}/>
        <Route path="/posts"component={Post}/>
        <Route path="/profile"component={Profile}/>
        <Route path="/"component={Home}/>
      </Switch>
    </div>
</BrowserRouter>

 

5-2. React router V6: Some of the new changes

React router v6에서 바뀐 점을 설명하고 있는 블로그이다. 

switch 대신 Routes를 사용하는 것, exact prop가 더 이상 필요가 없는 것, NavLink에서 activeClassName prop가 사라져서 화살표 함수 방식으로 바꿔야 하는 것에 대해서 이야기하고 있는 글이다!!