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

前言：

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

2、核心组件是RouterWithSubRoutes。

const RouterWithSubRoutes = (route) => (
   (
    
  )} />)

实现效果：

代码如下：

const RouterWithSubRoutes = (route) => (
   (
    
  )} />)

const Sandwiches = () => 
sandwiches
const Tacos = ({ routes }) => (
  

    
Tacos
    

      
Bus
      
Cart
    
    {routes.map((route, i) => (
      
    ))}
  
)
const Bus = () => 
Bus
const Cart = () => 
Cart
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 (
      
        

          

            

              Tacos
            
            

              Sandwiches
            
          
          {routes.map((route, i) => (
            
          ))}
        
      
    );
  }
}

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

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