react实现路由
React 路由的实现方法
在 React 中实现路由功能通常使用 react-router-dom 库，这是 React 生态中最流行的路由解决方案。以下是几种常见的实现方式：
安装 react-router-dom
通过 npm 或 yarn 安装最新版本的 react-router-dom：
npm install react-router-dom
# 或
yarn add react-router-dom基本路由配置
创建一个简单的路由结构，包含多个页面：
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
function 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>
);
}
function Home() {
return <h2>Home Page</h2>;
}
function About() {
return <h2>About Page</h2>;
}动态路由参数
通过 URL 参数实现动态路由：
<Routes>
<Route path="/users/:id" element={<UserProfile />} />
</Routes>
function UserProfile() {
const { id } = useParams();
return <h2>User ID: {id}</h2>;
}嵌套路由
创建嵌套的路由结构：
<Routes>
<Route path="/dashboard" element={<Dashboard />}>
<Route path="profile" element={<Profile />} />
<Route path="settings" element={<Settings />} />
</Route>
</Routes>
function Dashboard() {
return (
<div>
<h2>Dashboard</h2>
<Outlet />
</div>
);
}编程式导航
使用 useNavigate 钩子进行编程式导航：
function LoginButton() {
const navigate = useNavigate();
return (
<button onClick={() => navigate('/dashboard')}>
Login
</button>
);
}路由守卫
实现认证路由保护：
function PrivateRoute({ element }) {
const isAuthenticated = checkAuth(); // 自定义认证逻辑
return isAuthenticated ? element : <Navigate to="/login" />;
}
<Routes>
<Route path="/admin" element={<PrivateRoute element={<AdminPage />} />} />
</Routes>404 页面处理
添加未匹配路由的处理：
<Routes>
<Route path="*" element={<NotFound />} />
</Routes>
function NotFound() {
return <h2>404 Page Not Found</h2>;
}哈希路由模式
如果需要支持旧版浏览器，可以使用哈希路由：
import { HashRouter } from 'react-router-dom';
function App() {
return (
<HashRouter>
{/* 路由配置 */}
</HashRouter>
);
}以上方法涵盖了 React 路由的基本用法和常见场景，可以根据项目需求选择合适的实现方式。
