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;