react-router实战之路由配置

 

1.简介

 

有些人在集中式路由配置中发现价值。路由配置只是数据。 React擅长映射将数据放入组件中，而是组件。

我们的路由配置只是逻辑“路由”的数组，使用`path`和`component`道具，顺序与您在中进行操作的方式相同。

 

2.实例

 

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

type R = {
    path: string ,
    component: any,
    routes?: R[]
}

const routes : R[]= [
  {
    path: "/sandwiches",
    component: Sandwiches
  },
  {
    path: "/tacos",
    component: Tacos,
    routes: [
      {
        path: "/tacos/bus",
        component: Bus
      },
      {
        path: "/tacos/cart",
        component: Cart
      }
    ]
  }
];

export default function RouteConfigExample() {
  return (