react如何定义路由
定义路由的基本方法
在React中定义路由通常使用react-router-dom库，这是React生态中最流行的路由解决方案。需要安装该库后才能使用路由功能。
npm install react-router-dom使用BrowserRouter和Routes
在应用的顶层组件中，通常需要用BrowserRouter或HashRouter包裹整个应用。Routes组件用于包含所有路由规则，Route组件定义具体的路径和对应渲染的组件。
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
</Routes>
</BrowserRouter>
);
}动态路由参数
可以通过冒号语法定义动态路由参数，这些参数可以在匹配的组件中通过useParams钩子获取。
<Route path="/users/:userId" element={<UserProfile />} />
// 在UserProfile组件中
import { useParams } from 'react-router-dom';
function UserProfile() {
const { userId } = useParams();
return <div>User ID: {userId}</div>;
}嵌套路由配置
通过将Route组件嵌套在其他Route组件中实现嵌套路由。父路由需要渲染Outlet组件作为子路由的占位符。
<Route path="/dashboard" element={<DashboardLayout />}>
<Route index element={<DashboardHome />} />
<Route path="settings" element={<DashboardSettings />} />
</Route>
// DashboardLayout组件中需要包含Outlet
import { Outlet } from 'react-router-dom';
function DashboardLayout() {
return (
<div>
<h1>Dashboard</h1>
<Outlet />
</div>
);
}编程式导航
使用useNavigate钩子可以在组件中进行编程式导航，实现页面跳转而不依赖Link组件。
import { useNavigate } from 'react-router-dom';
function LoginButton() {
const navigate = useNavigate();
return (
<button onClick={() => navigate('/dashboard')}>
Login
</button>
);
}路由守卫实现
通过高阶组件或自定义包装组件可以实现路由守卫，例如检查用户是否已认证。
function PrivateRoute({ element }) {
const isAuthenticated = checkAuth();
const navigate = useNavigate();
if (!isAuthenticated) {
navigate('/login');
return null;
}
return element;
}
// 使用方式
<Route path="/admin" element={<PrivateRoute element={<AdminPage />} />} />
