一、React-Router 基础概念
React-Router 是 React 生态系统中最受欢迎的路由库之一,它允许我们在 React 应用中实现页面之间的导航,而无需刷新整个页面。
核心组件
- BrowserRouter:使用 HTML5 History API 实现的路由组件
- Routes:路由容器,用于包裹多个 Route 组件
- Route:定义路由规则的组件
- Navigate:用于实现路由重定向
- Link:用于创建导航链接
- Outlet:用于渲染嵌套路由

二、基本路由配置
让我们看一个实际的路由配置示例:
jsx
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import Login from './views/login/Login';
import Layout from './views/layout/index';
import Public from './views/public/index';
import Home from './views/home/index';
import Score from './views/score/index';
function App() {
return (
<div>
<BrowserRouter>
<Routes>
<Route path='/' element={<Navigate to='/login' replace />} />
<Route path='/login' element={<Login />} />
<Route path='/layout' element={<Layout />}>
<Route path='' element={<Home />}></Route>
<Route path='public' element={<Public />}></Route>
<Route path='score' element={<Score />}></Route>
</Route>
</Routes>
</BrowserRouter>
</div>
)
}
export default App;
在这个示例中,我们:
- 导入了必要的路由组件
- 创建了一个包含所有路由配置的 App 组件
- 使用 BrowserRouter 包裹所有路由
- 配置了根路径重定向到登录页面
- 配置了登录页面路由
- 配置了带有子路由的布局页面
三、路由跳转
在登录页面中,我们使用 useNavigate
钩子来实现路由跳转:
jsx
import { useNavigate } from 'react-router-dom';
function Login() {
const navigate = useNavigate();
const onFinish = values => {
console.log('Received values of form: ', values);
// 跳去 layout 页面
navigate('/layout');
};
// 其他代码...
}
四、嵌套路由
嵌套路由是 React-Router 中非常强大的功能,它允许我们在一个页面中嵌套另一个页面。
jsx
import { Outlet } from 'react-router-dom';
function MainLayout() {
// 其他代码...
return (
<Layout className='layout-page'>
{/* 侧边栏代码... */}
<Layout>
{/* 头部代码... */}
<Content
style={{
margin: '24px 16px',
padding: 24,
background: colorBgContainer,
borderRadius: borderRadiusLG,
}}
>
<Outlet />
</Content>
</Layout>
</Layout>
)
}
五、实际应用场景
1. 登录重定向
在我们的示例中,当用户访问根路径时,会自动重定向到登录页面:
jsx
<Route path='/' element={<Navigate to='/login' replace />} />
2. 权限控制
我们可以扩展这个示例,实现权限控制。例如,只有登录后的用户才能访问布局页面。
3. 动态路由
我们可以使用动态路由来处理不确定的路由参数。例如:
jsx
<Route path='/user/:id' element={<UserDetail />} />
六、总结
React-Router 是 React 应用中实现路由功能的最佳选择之一,它提供了丰富的 API 和灵活的配置方式,可以满足各种复杂的路由需求。
通过本文的学习,你应该已经掌握了 React-Router 的基本使用方法,包括路由配置、路由跳转、嵌套路由等。