Data API를 지원하지 않는 Router Components

 

사용방법은 단순합니다.

1. <BrowserRouter> 정의

2. <Routes> 정의

3. <Route> 정의

  - Route 및의 자식 Route 정의

4. <Outlet> 지정

  - 부모Route와 자식Route간의 연결

---

 

App.js

import { Routes, Route, BrowserRouter } from 'react-router-dom';
import HomePage from '@/pages/HomePage';
import FirstPage from '@/pages/FirstPage';
import SecondPage from '@/pages/SecondPage';
import ChildPage from '@/pages/ChildPage';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route key={'/'} path={'/'} element={<HomePage />}>
          {/*자식 Route 정의 */}
          <Route key={'child'} path={'/child'} element={<ChildPage />} />
        </Route>
        <Route key={'first'} path={'/first'} element={<FirstPage />} />
        <Route key={'second'} path={'/second'} element={<SecondPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

컴포넌트 정의 - HomePage.jsx

<Outlet >으로 자식 Route가 표현되는 자리를 지정합니다.

import { Outlet } from 'react-router-dom';
...
<Container>
      <div className="title header">
        <label className="title-label">Home Page</label>
      </div>
      {/* 자식 Route를 보여주는데 사용 */}
      <Outlet />
      <div className="content">
        <RoundButton
          className="selected"
          onClick={() => {
            navigate('/first');
          }}
        >
          첫번째
        </RoundButton>
      </div>
    </Container>

 

컴포넌트 정의 - ChildPage.jsx

<Content>
      <div className="title ">
        <label className="title-label">Child Page</label>
      </div>
      <div className="content">
        <RoundButton
          onClick={() => {
            navigate(-1);
          }}
        >
          뒤로가기
        </RoundButton>
      </div>
      <div className="bg"></div>
    </Content>
    

 

 

 

※참고 사이트

https://reactrouter.com/en/main/router-components/browser-router

BrowserRouter v6.7.0