Bài 4: Cài đặt thư viện react-router-dom và cấu hình router cho dự án Reactjs

1. Cài đặt thư viện React-router-dom

yarn add react-router-dom

2. Tạo một số trang tương ứng với các router:

chúng ta sẽ tạo 3 pages: page Home: Không cần login vẫn có thể truy cập được ( pages/Home/index.tsx) page Profile: Cần login mới có thể truy cập được ( pages/Profile/index.tsx) page Login: Phục vụ cho việc login ( pages/Login/index.tsx) ** Trong folder src tạo folder pages**

• Tạo trang Home

function Home() { return <h2>Home page</h2>;
} export default Home;

• Tạo trang Profile

function Profile() { return <h2>Profile page</h2>;
} export default Profile;

• Tạo trang Login

function Login() { return <h2>Login page</h2>;
} export default Login;

3. Cấu hình router và tạo privteRouter

** Trong folder src tạo folder routes và file index.ts**

import { Fragment } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { publicRoutes, privateRoutes } from '~/routes';
// import { DefaultLayout } from '~/components/Layout'; function App() { const isLogin = false; return ( <Router> <div className="App"> <Routes> {publicRoutes.map((route, index) => { const Page = route.component; // let Layout = DefaultLayout; // if (route.layout) { // Layout = route.layout; // } else if (route.layout === null) { // Layout = Fragment; // } return ( <Route key={index} path={route.path} element={ // <Layout> <Page /> // </Layout> } /> ); })} {privateRoutes.map((route, index) => { const Page = route.component; return ( <Route key={index} path={route.path} element={!isLogin ? <Navigate to="/login" /> : <Page />} /> ); })} </Routes> </div> </Router> );
} export default App;