react路由配置

React Router 的路由配置，可以直接在 App.jsx 文件中来进行。

一、路由模式

React Router 中路由模式分为两种：BrowserRouter 和 HashRouter。

1、BrowserRouter

BrowserRouter 实际上指的就是 history 模式。

import { BrowserRouter } from 'react-router-dom';
const App = () => (
    <BrowserRouter>
    </BrowserRouter>
);

2、HashRouter

HashRouter 实际上指的就是 hash 模式，hash 模式的路由在浏览器的路径中会有 #。

import { HashRouter } from 'react-router-dom';
const App = () => (
    <HashRouter>
    </HashRouter>
);

二、一级路由配置

我们引入 Routes 和 Route 两个组件，来完成页面路由的配置：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import LoginPage from './pages/login/LoginPage';
import RegisterPage from './pages/register/RegisterPage';
import IndexPage from './pages/index/IndexPage';
const App = () => (
    <BrowserRouter>

说明：

1. <Routes> 用来包裹项目中的所有路由；
2. <Route> 用来配置项目中每个页面的对应的路由，其中 path 属性用来设置路由路径，element 属性用来设置当前路由对应的组件；

配置完成后，我们就可以在浏览器中通过 http://127.0.0.1:5173/login 访问登录页面了。

三、配置 404 路由

404 路由和普通一级路由的配置方式一致，只需要在所有路由配置的最后，添加一个 path 为 * 的路由即可：

import NotFound from './pages/404/NotFound';
const App = () => (
    <BrowserRouter>
        <Routes>
            <Route path='/login' element={<LoginPage />}></Route>
            <Route path='/register' element={<RegisterPage />}></Route>
            <Route path='/' element={<IndexPage />}></Route>
            <Route path='*' element={<NotFound />}></Route>
        </Routes>
    </BrowserRouter>
);

四、重定向

import { Navigate } from 'react-router-dom';
const App = () => (
    <BrowserRouter>
        <Routes>
            <Route path='/' element={<Navigate to="/home" />}></Route>
            <Route path='/' element={<IndexPage />}>
                <Route path='home' element={<HomePage />}></Route>
            </Route>
        </Routes>
    </BrowserRouter>
);

五、路由懒加载

路由懒加载，指的是我们希望当用户访问到对应的路由后，才开始加载对应的组件。通常会用于页面简单且用户访问量比较少的组件。

import React, { Suspense, lazy } from 'react';
const RegisterPage = lazy(() => import('./pages/register/RegisterPage'));
const NotFound = lazy(() => import('./pages/404/NotFound'));
const App = () => (
    <Suspense fallback={<h1>加载中...</h1>}>
        <BrowserRouter>
            <Routes>
            </Routes>
        </BrowserRouter>
    </Suspense>
);