【react-router】快速搭建管理系统路由结构

本文将通过一个简单的管理系统示例，展示如何使用 react-router 快速搭建前端路由：实现一个基础布局的管理页面，在布局里可以切换不同的模块，同时，登录页面不使用基础布局。

一、概览

实现功能：

1. 登录页面：通过 /login 路径访问登录页面。
2. 主页布局：通过 / 路径进入主页布局，默认加载用户模块。
3. 用户模块：通过 /user 路径访问用户管理功能。
4. 仓库模块：通过 /store 路径访问仓库管理功能。

基础知识：

1. BroserRouter 组件。使用 BroserRouter 包裹 App 组件。
2. 路由配置。在 App 组件中定义 url 路径和组件的映射。
3. 嵌套路由（布局路由）。使用路由配置+Outlet 实现嵌套路由。
4. 声明式路由跳转。使用 Link 组件并配置 to 属性。

二、具体代码参考

0. 文件结构

文件结构如下：路由对应的组件称为“page”，开发 page 的过程中，可能需要从 page 中拆分组件，如果组件可以在多个 page 中复用，则应该放到 src/components 下面，如果组件只在本 page 使用，可以在 pages 下新建文件夹比如 User/来存放私有组件。

src/
├── App.js
├── components/
├── pages/
│   ├── Layout.js
│   ├── User.js
│   ├── Store.js
│   └── Login.js
├── routes.js
└── index.js

1. 使用 BroserRouter 包裹 App 组件。

// src/main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

2. 配置路由

我们使用 Routes 和 Route 来定义不同路径对应的组件。

示例配置了：

1. 简单路由（login）
2. 嵌套布局（Layout）
3. 默认布局（index）

// src/App.tsx

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';
import Login from './components/Login';
import User from './components/User';
import Store from './components/Store';

const App = () => {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/" element={<Layout />}>
        <Route index element={<User />} />
        <Route path="user" element={<User />} />
        <Route path="store" element={<Store />} />
      </Route>
    </Routes>
  );
};

export default App;

3. 布局组件、Outlet 与 Link

Layout 是主页布局组件，包含导航栏和子路由的占位。我们使用 Outlet 来渲染子路由的内容。

// src/pages/Layout.tsx

import React from 'react';
import { Outlet, Link } from 'react-router-dom';

const Layout = () => {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">主页</Link>
          </li>
          <li>
            <Link to="/user">用户</Link>
          </li>
          <li>
            <Link to="/store">仓库</Link>
          </li>
        </ul>
      </nav>
      <Outlet />
    </div>
  );
};

export default Layout;

4. 功能模块

用户模块：

// src/pages/User.tsx

import React from 'react';

const User = () => {
  return <div>用户模块</div>;
};

export default User;

仓库模块：

// src/pages/Store.tsx

import React from 'react';

const Store = () => {
  return <div>仓库模块</div>;
};

export default Store;

登录页面：

// src/pages/Login.tsx

import React from 'react';
import { useNavigate } from 'react-router-dom';

const Login = () => {
  const navigate = useNavigate();

  const handleLogin = () => {
    // 模拟登录逻辑
    navigate('/');
  };

  return (
    <div>
      <h1>登录页面</h1>
      <button onClick={handleLogin}>登录</button>
    </div>
  );
};

export default Login;

三、总结

通过 react-router，我们可以快速搭建一个具有多模块的管理系统前端路由。希望本文对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言。

参考：Routing | React Router