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>
说明:
<Routes>
用来包裹项目中的所有路由;<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>
);