react-router-config嵌套之后不渲染，求解决。

Question

路由配置文件结构如此，为什么把login组件放在最下面不会渲染呢？
而且如果有两个子组件同时拥有孙子组件的话，也只会渲染一个呢。

    const App = () => ( //app
    <Router>
    <Switch>
      {renderRoutes(configRoutes)}
    </Switch>
    </Router>)
    export default App

const render = Component => {
  ReactDOM.render(
    <AppContainer warnings={false}>
      <Provider store={store}>
        <Component />
      </Provider>
    </AppContainer>,
    document.getElementById('root')
  )
}

render(App)

const basicRoutes = [   //路由页面
  // { // 放在上面渲染OK，
  //   path: '/login',
  //   component: Login
  // },
  {
    component: HomeView,
    routes: [
      {
        path: '/',
        exact: true,
        component: Home
      },
      {
        path: '/page1',
        exact: true,

        component: Page1
      },
      // { // 渲染OK
      //   path: '/login',
      //   component: Login
      // },
      {
        component: Page2,
        routes: [
          {

            path: '/page2/:id',
            exact: true,

            component: Page4
          },
          {
            path: '/page4',
            exact: true,

            component: Page1
          }
        ]
      }
      // { // 渲染失败
      //   path: '/login',
      //   component: Login
      // }
    ]
  },
  // { // 渲染失败
  //   component: Login,
  //   exact: true,
  //   path: '/login'
  // }
]

export default basicRoutes

Answer 1

首先你放在一个Switch里面，所以只会有一条路线会命中。

<Switch> is unique in that it renders a route exclusively. In contrast, every <Route> that matches the location renders inclusively

其次HomeView组件以及Page2组件的path都为空，所以它会命中任何的路由，所以如果你把Login放在后面，因为前面永远都有路由命中，自然不会渲染Login页面，后面的问题也同理。