React-Router 全面解析与实战指南

一、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 的基本使用方法，包括路由配置、路由跳转、嵌套路由等。