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