react-router-dom示例讲解（十）——路由配置

前言：

1、{...props}、{...route}用到了扩展运算符，具体可点此了解，扩展运算符

2、核心组件是RouterWithSubRoutes。

const RouterWithSubRoutes = (route) => (
  <Route path={route.path} render={props => (
    <route.component {...props} routes={route.routes} />
  )} />)

实现效果：

代码如下：

const RouterWithSubRoutes = (route) => (
  <Route path={route.path} render={props => (
    <route.component {...props} routes={route.routes} />
  )} />)

const Sandwiches = () => <h2>sandwiches</h2>
const Tacos = ({ routes }) => (
  <div>
    <h2>Tacos</h2>
    <ul>
      <li><Link to="/tacos/bus">Bus</Link></li>
      <li><Link to="/tacos/cart">Cart</Link></li>
    </ul>
    {routes.map((route, i) => (
      <RouterWithSubRoutes key={i} {...route} />
    ))}
  </div>
)
const Bus = () => <h3>Bus</h3>
const Cart = () => <h3>Cart</h3>
const routes = [
  {
    path: '/sandwiches',
    component: Sandwiches
  },
  {
    path: '/tacos',
    component: Tacos,
    routes: [
      {
        path: '/tacos/bus',
        component: Bus
      },
      {
        path: '/tacos/cart',
        component: Cart
      }
    ]
  }
]
class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li>
              <Link to="/tacos">Tacos</Link>
            </li>
            <li>
              <Link to="/sandwiches">Sandwiches</Link>
            </li>
          </ul>
          {routes.map((route, i) => (
            <RouterWithSubRoutes key={i} {...route} />
          ))}
        </div>
      </Router>
    );
  }
}

这个例子不是好理解，它里面的逻辑比较绕，还用了一些es6的方法。

倘若你还不理解请参考我的github上的这个示例：https://github.com/guoqin721/react-router-dom10react-router-dom10-