Router 사용하는 순서는 아래와 같습니다.
App.js - router 생성
- createBrowserRouter를 통한 Router 생성
- RouterPrivder 정의
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import routes from '@/routes/routes';
const router = createBrowserRouter(routes);
function App() {
return <RouterProvider router={router} />;
}
export default App;
routes.js - path 및 element 정의
const routes = [
{
path: '/',
element: <HomePage />,
},
{
path: '/first',
element: <FirstPage />,
},
{
path: '/second',
element: <SecondPage />,
},
];
export default routes;
컴포넌트 정의 - HomePage.jsx
<RoundButton
className="selected"
onClick={() => {navigate('/first');}}>
첫번째
</RoundButton>
컴포넌트 정의 - FirstPage.jsx
<RoundButton
onClick={() => {navigate(-1)}}>
뒤로가기
</RoundButton>
<RoundButton
className="selected"
onClick={() => {navigate('/second')}}>
두번째
</RoundButton>
React Router Transition 효과 적용 (0) | 2023.01.20 |
---|---|
React Routes, Route 사용시 배열로 관리하기 (0) | 2023.01.20 |
Data API를 지원하지 않는 Router Components (0) | 2023.01.20 |
React Router (0) | 2023.01.20 |
댓글 영역