react react-router-config

路由我已经安装过了，执行下面命令

npm install react-router-config -S

 

目录结构

 

 

 

index.js

 

 

 

Home.js

import { renderRoutes } from "react-router-config";

import { routes } from "../../router/router"; // 导入路由配置文件

 

在用的地方，这个是根路由

{renderRoutes(routes)} 

 

 

router.js

 

用哪个就引入哪个，我这个只是写了几个

 

import Edit from "../pages/product/edit/Edit";

import AddProduct from "../pages/product/addProduct/addProduct";

import Lol from "../components/lol/Lol";

 

const routes = [

  {

    path: "/",

    exact: true, // 不加的话就都是 / 路径

    component: Main,

  },

  {

    path: "/edit",

    component: Edit,

  },

  {

    path: "/addProduct",

    component: AddProduct,

    routes: [

      {

        path: "/addProduct/lol",

        component: Lol,

      },

      {

        path: "/addProduct/gok",

        component: Gok, // 无状态组件

      },

    ]

  }

];

export { routes };

 

在addProduct.js里面使用，这个页面里面还有两个子路由

 

 

 

子路由页面 Lol.js