react router如何实现
React Router 的实现方法
React Router 是一个用于在 React 应用中实现路由功能的库。以下是实现 React Router 的基本步骤和关键概念。
安装 React Router
使用 npm 或 yarn 安装 React Router 的核心包和 DOM 绑定包：
npm install react-router-dom或
yarn add 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 />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
);
}动态路由
动态路由允许通过 URL 传递参数：
<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>
);
}导航链接
使用 <Link> 组件实现导航，避免页面刷新：
import { Link } from 'react-router-dom';
function Navbar() {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
);
}编程式导航
通过 useNavigate 钩子实现编程式导航：
import { useNavigate } from 'react-router-dom';
function LoginButton() {
const navigate = useNavigate();
return (
<button onClick={() => navigate('/dashboard')}>
Login
</button>
);
}404 页面处理
未匹配的路由可以显示自定义 404 页面：
<Route path="*" element={<NotFound />} />路由守卫
通过高阶组件或条件渲染实现路由守卫：
function PrivateRoute({ element }) {
const isAuthenticated = checkAuth();
return isAuthenticated ? element : <Navigate to="/login" />;
}
<Route path="/admin" element={<PrivateRoute element={<Admin />} />} />代码分割与懒加载
结合 React.lazy 和 Suspense 实现懒加载：
const About = React.lazy(() => import('./About'));
<Route path="/about" element={
<Suspense fallback={<div>Loading...</div>}>
<About />
</Suspense>
} />以上是 React Router 的核心实现方法，涵盖了从基础配置到高级功能的常见场景。
