react如何设置路由
设置路由的基本步骤
在React中设置路由通常使用react-router-dom库。安装依赖包：
npm install react-router-dom基本路由配置
引入必要的组件并配置路由：
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}动态路由参数
通过冒号语法传递参数：
<Route path="/user/:id" element={<UserProfile />} />在组件中获取参数：
import { useParams } from 'react-router-dom';
function UserProfile() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}嵌套路由配置
通过Outlet组件实现嵌套路由：
<Route path="/dashboard" element={<Dashboard />}>
<Route path="stats" element={<Stats />} />
<Route path="settings" element={<Settings />} />
</Route>在父组件中渲染子路由：
import { Outlet } from 'react-router-dom';
function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
<Outlet />
</div>
);
}编程式导航
使用useNavigate进行页面跳转：
import { useNavigate } from 'react-router-dom';
function LoginButton() {
const navigate = useNavigate();
return (
<button onClick={() => navigate('/dashboard')}>
Login
</button>
);
}路由守卫实现
通过高阶组件保护路由：
function PrivateRoute({ element: Element, ...rest }) {
const isAuthenticated = checkAuth();
return isAuthenticated ? <Element {...rest} /> : <Navigate to="/login" />;
}
// 使用方式
<Route path="/admin" element={<PrivateRoute element={AdminPanel} />} />404页面处理
添加通配符路由捕获未匹配路径：
<Route path="*" element={<NotFound />} />
