+1

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;

All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.