1. react router 简介
react router 是一个用于在 react 应用程序中处理路由的库。它允许您的应用程序在不同的组件和视图之间导航，而无需重新加载整页，从而实现无缝的用户体验。
2. 基本设置
首先安装react-router-dom：
npm install react-router-dom
使用 browserrouter、routes 和 route 设置基本路由：
import react from 'react';
import { browserrouter as router, routes, route, link } from 'react-router-dom';
const home = () => <h2>home</h2>;
const about = () => <h2>about</h2>;
const app = () => {
return (
<router>
<nav>
<link to="/">home</link>
<link to="/about">about</link>
</nav>
<routes>
<route path="/" element={<home />} />
<route path="/about" element={<about />} />
</routes>
</router>
);
};
export default app;
3. 嵌套路由
对于更复杂的应用程序，您可以嵌套路由。以下是如何在父组件中设置嵌套路由：
import react from 'react';
import { browserrouter as router, routes, route, link } from 'react-router-dom';
const dashboard = () => <h2>dashboard home</h2>;
const profile = () => <h2>your profile</h2>;
const dashboardlayout = () => {
return (
<div>
<nav>
<link to="/dashboard">home</link>
<link to="/dashboard/profile">profile</link>
</nav>
<routes>
<route path="/" element={<dashboard />} />
<route path="profile" element={<profile />} />
</routes>
</div>
);
};
const app = () => {
return (
<router>
<routes>
<route path="/dashboard/*" element={<dashboardlayout />} />
</routes>
</router>
);
};
export default app;
4. 动态路由
动态路由允许您在 url 中传递参数。以下是定义和访问动态路线的方法：
import { useparams } from 'react-router-dom';
const user = () => {
const { id } = useparams();
return <h2>user id: {id}</h2>;
};
const app = () => {
return (
<router>
<nav>
<link to="/user/1">user 1</link>
<link to="/user/2">user 2</link>
</nav>
<routes>
<route path="/user/:id" element={<user />} />
</routes>
</router>
);
};
export default app;
5. 受保护路线
要实现受保护的路由，您可以创建自定义 privateroute 组件：
import { navigate, outlet } from 'react-router-dom';
const useauth = () => {
const user = { loggedin: true }; // replace with actual auth logic
return user && user.loggedin;
};
const privateroute = () => {
const isauth = useauth();
return isauth ? <outlet /> : <navigate to="/login" />;
};
const app = () => {
return (
<router>
<routes>
<route path="/login" element={<login />} />
<route path="/dashboard" element={<privateroute />}>
<route path="" element={<dashboard />} />
</route>
</routes>
</router>
);
};
export default app;
6. 程序化导航
有时，您可能希望以编程方式导航，例如在提交表单后。在 react router v6 中使用 usenavigate 钩子：
import { usenavigate } from 'react-router-dom';
const login = () => {
const navigate = usenavigate();
const handlelogin = () => {
// login logic here...
navigate('/dashboard');
};
return (
<div>
<h2>login</h2>
<button onclick={handlelogin}>login</button>
</div>
);
};
export default login;
7. 404 页
通过创建包罗万象的路由来处理 404（未找到）错误：
const notfound = () => <h2>404 - page not found</h2>;
const app = () => {
return (
<router>
<routes>
<route path="/" element={<home />} />
<route path="/about" element={<about />} />
<route path="*" element={<notfound />} />
</routes>
</router>
);
};
export default app;
8. 性能考虑因素
对于大型应用程序，延迟加载路由可以提高性能。以下是如何使用 react.lazy() 和 suspense 实现延迟加载：
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const App = () => {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Suspense>
</Router>
);
};
export default App;
