react如何使用路由
React 路由的使用方法
React 路由通常通过 react-router-dom 库实现，以下是具体的使用步骤：
安装 react-router-dom
在项目中运行以下命令安装最新版本的 react-router-dom：
npm install react-router-dom基本路由配置
在应用的入口文件（如 App.js）中配置路由：
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}导航链接
使用 Link 组件实现页面间的导航：
import { Link } from 'react-router-dom';
function Navbar() {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
);
}动态路由 通过参数实现动态路由匹配：
<Route path="/user/:id" element={<UserProfile />} />在目标组件中通过 useParams 获取参数：
import { useParams } from 'react-router-dom';
function UserProfile() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}嵌套路由 嵌套路由可用于实现多层页面结构：
<Route path="/dashboard" element={<Dashboard />}>
<Route path="profile" element={<Profile />} />
<Route path="settings" element={<Settings />} />
</Route>在父组件中使用 Outlet 渲染子路由：
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>
);
}路由守卫 通过自定义逻辑实现路由守卫：
<Route
path="/admin"
element={isAdmin ? <AdminPanel /> : <Navigate to="/login" />}
/>404 页面处理 使用通配符路由匹配未定义的路径：
<Route path="*" element={<NotFound />} />
