react如何配置路由
React 路由配置方法
在 React 中配置路由通常使用 react-router-dom 库，以下是详细配置步骤：
安装 react-router-dom
通过 npm 或 yarn 安装最新版本的 react-router-dom：
npm install react-router-dom
# 或
yarn add 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';
import Contact from './components/Contact';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
);
}动态路由参数
通过冒号 : 定义动态路由参数：
<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 组件实现嵌套路由：
<Route path="/dashboard" element={<Dashboard />}>
<Route path="settings" element={<Settings />} />
<Route path="profile" element={<Profile />} />
</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>
);
}404 页面处理
使用 path="*" 配置 404 页面：
<Route path="*" element={<NotFound />} />路由守卫
通过封装高阶组件实现路由守卫：
function PrivateRoute({ element, ...rest }) {
const isAuthenticated = /* 认证逻辑 */;
return isAuthenticated ? element : <Navigate to="/login" />;
}
// 使用方式
<Route path="/admin" element={<PrivateRoute element={<AdminPage />} />} />HashRouter 替代方案
如果服务器不支持 HTML5 History API，可以使用 HashRouter：
import { HashRouter } from 'react-router-dom';
function App() {
return (
<HashRouter>
{/* 路由配置 */}
</HashRouter>
);
}
