来自react-router-redux的ConnectedRouter不支持子道具

Question

而

<Router history={browserHistory} children={this.props.routes} />

在React路由器v4中受支持，

使用react-router-redux ConnectedRouter不支持它

例如

<ConnectedRouter
    history={this.props.history}
    children={this.props.routes}
/>

是否有一种方法可以将路径作为子道具传递，因为这是使用对象构建路径的简单方法

谢谢

Answer 1

您应该在内部创建您的应用程序组件

<ConnectedRouter history={history}>
  <div>
    <App />
  </div>
</ConnectedRouter>

您的应用程序组件应该使用switch和路由元素处理子组件，如下所示：

<Switch> {/* redirect to the first correct statemet */}
   <Route path={NavigationPath.Home} component={Home} />
   <Route path={NavigationPath.About} component={About} />
   <Route path={NavigationPath.Summary} component={Summary} />
   <Route path={NavigationPath.Account} component={Login} />
   <Redirect from="/" to={NavigationPath.Home} />
   <Route component={NotFound} />
</Switch>

比子组件具有更多路由

Answer 2

您可以像在文档中那样将对象映射到组件：

////////////////////////////////////////////////////////////
// then our route config
const routes = [
  { path: '/sandwiches',
    component: Sandwiches
  },
  { path: '/tacos',
    component: Tacos,
    routes: [
      { path: '/tacos/bus',
        component: Bus
      },
      { path: '/tacos/cart',
        component: Cart
      }
    ]
  }
]

// wrap <Route> and use this everywhere instead, then when
// sub routes are added to any route it'll work
const RouteWithSubRoutes = (route) => (
  <Route path={route.path} render={props => (
    // pass the sub-routes down to keep nesting
    <route.component {...props} routes={route.routes}/>
  )}/>
)

const RouteConfigExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/tacos">Tacos</Link></li>
        <li><Link to="/sandwiches">Sandwiches</Link></li>
      </ul>

      {routes.map((route, i) => (
        <RouteWithSubRoutes key={i} {...route}/>
      ))}
    </div>
  </Router>
)

从这里：https://reacttraining.com/react-router/web/example/route-config