包版本问题

使用react-router-config时出现 export ‘Switch’ (imported as ‘Switch’) was not found in ‘react-router-dom’； export ‘Redirect’ (imported as ‘Redirect’) was not found in ‘react-router-dom’ 错误

错误原因：新版本（v6）的react-router-dom、react-router使用方法不同
解决方案：

方法1：安装旧版本的react-router-dom, yarn add react-router-dom@5 react-router@5
方法2：新版本中将所有 Switch 改为 Routes，Redirect 改为 Navigate

嵌套路由问题

注意嵌套路由需要在父组件再调用一次renderRoutes，并且 renderRoutes(routes)的routes是在props中获取的，即应该写成renderRoutes(props.route.routes)

//路由表router.s
import React from "react";
import { Redirect } from "react-router-dom";
import Home from "../application/Home";
import Login from "../application/Login";
import Register from "../application/Register";
import DateManagement from "../application/DateManagement";
import ModelTraining from "../application/ModelTraining";
import Prediction from "../application/Prediction";
import RecentCollection from "../application/RecentCollection";
import Trend from "../application/Trend";
import UserManagerment from "../application/UserManagerment";

export default [
  {
    path: "/",
    component: Home,
    routes: [
      {
        path: "/",
        exact: true,
        render: () => <Redirect to={"/login"} />,
      },
      {
        path: "/login",
        component: Login,
      },
      {
        path: "/register",
        component: Register,
      },
      {
        path: "/datemanagement",
        component: DateManagement,
      },
      {
        path: "/modeltraining",
        component: ModelTraining,
      },
      {
        path: "/prediction",
        component: Prediction,
      },
      {
        path: "/recentcollection",
        component: RecentCollection,
      },
      {
        path: "/trend",
        component: Trend,
      },
      {
        path: "/usermanagerment",
        component: UserManagerment,
      },
    ],
  },
];

//app.js
import { GlobalStyle } from "./style";
import { renderRoutes } from "react-router-config";
import routes from "./routes";
import { HashRouter } from "react-router-dom";
function App() {
  return (
    <HashRouter>
      <GlobalStyle></GlobalStyle>
      {renderRoutes(routes)}
    </HashRouter>
  );
}

export default App;

//Home.js
import React from "react";
import { renderRoutes } from "react-router-config/cjs/react-router-config.min";
export default function Home(props) {
  return (
    <>
      home
      {/* 注意嵌套路由需要在父组件再调用一次renderRoutes，并且 renderRoutes(routes)的routes是在props中获取的，即应该写成renderRoutes(props.route.routes) */}
      {renderRoutes(props.route.routes)}
    </>
  );
}

react-router-config踩坑

包版本问题

嵌套路由问题