React项目-路由配置

一、项目版本

1、react："^18.3.1"；

2、react-router-dom："^6.23.1"；

3、项目创建方式：create-react-app；

二、路由配置

1、路由-对象配置

（1）router.js

        在src/创建一个router.js文件（目录结构可以自定义）

import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
import App from './App'
import Teach from "./components/Teach"
import UserMgr from "./components/teach/UserMgr";
import DataMgr from "./components/teach/DataMgr";
import ConfigMgr from "./components/teach/ConfigMgr";
import StateMonitor from "./components/teach/StateMonitor";
import AdminMgr from "./components/teach/subPage/AdminMgr";
import TeacherMgr from "./components/teach/subPage/TeacherMgr";
import StudentMgr from "./components/teach/subPage/StudentMgr";
import PasswdMgr from "./components/teach/subPage/PasswdMgr";

export default function AppRouter() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<App />}>
          <Route path="" element={<Navigate to="/teach" />}>
          </Route>
          <Route path='/teach' element={<Teach />}>
            <Route path="" element={<Navigate to="userMgr" />}></Route>
            <Route path="userMgr" element={<UserMgr />}>
              <Route path="" element={<Navigate to="adminMgr" />}></Route>
              <Route path="adminMgr" element={<AdminMgr />}> </Route>
              <Route path="teacherMgr" element={<TeacherMgr />}> </Route>
              <Route path="studentMgr" element={<StudentMgr />}> </Route>
              <Route path="passwdMgr" element={<PasswdMgr />}> </Route>
            </Route>
            <Route path="dataMgr" element={<DataMgr />}></Route>
            <Route path="configMgr" element={<ConfigMgr />}></Route>
            <Route path="stateMonitor" element={<StateMonitor />}></Route>
          </Route>
        </Route>
      </Routes>
    </Router >
  )
}

（2）index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import AppRouter from './router';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <AppRouter />
  </React.StrictMode>
);

reportWebVitals();

（3）App.js

import { useState } from 'react';
import { Outlet } from 'react-router-dom';

import './App.css';
import Header from './components/Header';

export default function App() {
  const [isActive, setIsActive] = useState(0)

  function clickMenu(path, menuId) {
    if (isActive === menuId) {
      return
    }
    // 保存当前点击的菜单ID
    setIsActive(menuId)
  }

  return (
    <div className="App">
      <Header clickMenu={clickMenu} active={isActive}></Header>
      <div className="content">
        <Outlet />
      </div>
    </div>
  );
}

2、路由-数组配置

（1）router.js

// 引入组件
import App from "./App";
import Teach from "./components/Teach"
import UserMgr from "./components/teach/UserMgr";
import DataMgr from "./components/teach/DataMgr";
import ConfigMgr from "./components/teach/ConfigMgr";
import StateMonitor from "./components/teach/StateMonitor";
import AdminMgr from "./components/teach/subPage/AdminMgr";
import TeacherMgr from "./components/teach/subPage/TeacherMgr";
import StudentMgr from "./components/teach/subPage/StudentMgr";
import PasswdMgr from "./components/teach/subPage/PasswdMgr";

import { createBrowserRouter, Navigate } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: < App />,
    children: [
      { path: "", element: <Navigate to="teach" replace /> },
      { path: "teach", element: <Teach />,
        children: [
          { path: "", element: <Navigate to="userMgr" replace /> },
          { path: "userMgr", element: <UserMgr />,
            children: [
              { path: "", element: <AdminMgr /> },
              { path: "adminMgr", element: <AdminMgr /> },
              { path: "teacherMgr", element: <TeacherMgr /> },
              { path: "studentMgr", element: <StudentMgr /> },
              { path: "passwdMgr", element: <PasswdMgr /> },
            ]
          },
          { path: "dataMgr", element: <DataMgr /> },
          { path: "configMgr", element: <ConfigMgr /> },
          { path: "stateMonitor", element: <StateMonitor /> }
        ]
      }
    ]
  },
])

export default router

（2）index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { RouterProvider } from 'react-router-dom';
import router from './router';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <React.StrictMode>
    <RouterProvider router={router}>
      <App />
    </RouterProvider>
  // </React.StrictMode>
);
reportWebVitals();

（3）App.js

import './App.css';
import Header from './components/Header';
import { Outlet, useNavigate} from 'react-router-dom';
import { useState } from 'react';

export default function App() {
  const [isActive, setIsActive] = useState(0)
  const navigate = useNavigate()

  function clickMenu(path, menuId) {
    if (isActive === menuId) {
      return
    }
    // 保存当前点击的菜单ID
    setIsActive(menuId)
    // 跳转路由
    navigate(path)
  }

  return (
    <div className="App">
      <Header clickMenu={clickMenu} active={isActive}></Header>
      <div className="content">
        <Outlet />
      </div>
    </div>
  );
}

3、路由-函数创建

（1）router.js

// 引入组件
import App from "./App";
import Teach from "./components/Teach"
import UserMgr from "./components/teach/UserMgr";
import DataMgr from "./components/teach/DataMgr";
import ConfigMgr from "./components/teach/ConfigMgr";
import StateMonitor from "./components/teach/StateMonitor";
import AdminMgr from "./components/teach/subPage/AdminMgr";
import TeacherMgr from "./components/teach/subPage/TeacherMgr";
import StudentMgr from "./components/teach/subPage/StudentMgr";
import PasswdMgr from "./components/teach/subPage/PasswdMgr";

import { Navigate, useRoutes } from "react-router-dom";

export default function AppRouter() {
  const router = useRoutes([
    {
      path: "/",
      element: < App />,
      children: [
        { path: "", element: <Navigate to="teach" replace /> },
        {
          path: "teach", element: <Teach />,
          children: [
            { path: "", element: <Navigate to="userMgr" replace /> },
            {
              path: "userMgr", element: <UserMgr />,
              children: [
                { path: "", element: <AdminMgr /> },
                { path: "adminMgr", element: <AdminMgr /> },
                { path: "teacherMgr", element: <TeacherMgr /> },
                { path: "studentMgr", element: <StudentMgr /> },
                { path: "passwdMgr", element: <PasswdMgr /> },
              ]
            },
            { path: "dataMgr", element: <DataMgr /> },
            { path: "configMgr", element: <ConfigMgr /> },
            { path: "stateMonitor", element: <StateMonitor /> }
          ]
        }
      ]
    },
  ])

  return router
}

（2）index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { HashRouter } from 'react-router-dom';
import AppRouter from './router';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // 必须使用hash路由模式，不然会报错
  // <React.StrictMode>
  <HashRouter>
    < AppRouter />
  </HashRouter>
  // </React.StrictMode>
);

reportWebVitals();

（3）App.js

import './App.css';
import Header from './components/Header';
import { Outlet } from 'react-router-dom';
import { useState } from 'react';

export default function App() {
  const [isActive, setIsActive] = useState(0)

  function clickMenu(path, menuId) {
    if (isActive === menuId) {
      return
    }
    // 保存当前点击的菜单ID
    setIsActive(menuId)
  }

  return (
    <div className="App">
      <Header clickMenu={clickMenu} active={isActive}></Header>
      <div className="content">
        <Outlet />
      </div>
    </div>
  );
}