React Router 6 (React路由) 最详细教程
最新回答
「遺落的星星」
2024-04-23 21:19:38
React Router 6 是 React 路由的最新版本，引入了许多新概念和 Hook，本文将详细介绍其核心用法和常见场景实现。
核心概念
什么是 React RouterReact Router 是 React 生态中最流行的路由库，用于实现单页应用(SPA)的页面导航。SPA 只有一个 index.html 文件，传统 <a> 标签无法实现无刷新跳转，React Router 通过 JavaScript 控制路由切换。
版本选择- 网页应用：使用 react-router-dom@6
- React Native：使用 react-router-native@6
安装配置
创建项目npx create-react-app react-router-6-tutorial安装路由库# npmnpm install react-router-dom@6# yarnyarn add react-router-dom@6核心 API 详解
BrowserRouter作为路由容器包裹整个应用，基于 HTML5 History API 实现路由控制：
import { BrowserRouter } from 'react-router-dom'ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('app'))Route定义路径与组件的映射关系：
<Route path="/about" element={<About />} />Routes路由集合容器，匹配第一个符合条件的路由：
<Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /></Routes>完整实操案例
基础路由配置import { BrowserRouter, Routes, Route } from 'react-router-dom'function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/dashboard" element={<Dashboard />} /> </Routes> </BrowserRouter> )}const Home = () => <div>Hello World</div>const About = () => <div>卡拉云主页</div>const Dashboard = () => <div>活跃用户: 42</div>获取当前路径使用 useLocation Hook 获取路由信息：
import { useLocation } from 'react-router-dom'const About = () => { const location = useLocation() return ( <div> 当前路径: {location.pathname} 来源路径: {location.state?.from || '直接访问'} </div> )}404 页面配置添加通配符路由捕获未匹配路径：
function App() { return ( <BrowserRouter> <Routes> {/* 其他路由... */} <Route path="*" element={<NotFound />} /> </Routes> </BrowserRouter> )}const NotFound = () => <div>404 页面未找到</div>
通过自定义路由组件实现登录保护：
import { Navigate } from 'react-router-dom'const PrivateRoute = ({ children }) => { const isAuthenticated = checkAuth() // 替换为实际鉴权逻辑 return isAuthenticated ? children : <Navigate to="/login" replace />}// 使用方式<Route path="/dashboard" element={ <PrivateRoute> <Dashboard /> </PrivateRoute>} />高级功能
嵌套路由使用 Outlet 实现布局共享：
const Layout = () => ( <div> <nav> <Link to="/">Home</Link> <Link to="/dashboard">Dashboard</Link> </nav> <Outlet /> {/* 子路由渲染位置 */} </div>)<Routes> <Route path="/" element={<Layout />}> <Route index element={<Home />} /> <Route path="dashboard" element={<Dashboard />} /> </Route></Routes>程序化导航使用 useNavigate Hook 实现编程式跳转：
import { useNavigate } from 'react-router-dom'const LoginButton = () => { const navigate = useNavigate() const handleLogin = () => { // 登录逻辑... navigate('/dashboard', { state: { from: '/login' }, replace: true }) } return <button onClick={handleLogin}>登录</button>}最佳实践
- 路由懒加载：配合 React.lazy 实现代码分割
- 路由参数：使用动态路由参数
- 搜索参数：处理 URL 查询字符串
总结
React Router 6 通过以下改进提升了开发体验：
- 更简洁的 API 设计
- 更好的 TypeScript 支持
- 更强大的路由匹配逻辑
- 更灵活的嵌套路由实现
完整示例代码可参考
官方GitHub仓库
，建议在实际项目中结合具体业务场景进行实践。对于需要快速搭建后台系统的开发者，也可以考虑使用卡拉云
等低代码平台简化开发流程。
热门标签
