Question

虽然

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

React router v4支持

，

使用react-router-redux ConnectedRouter不支持

例如

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

有没有办法将路径作为子道具传递，因为这是使用对象构建路径的简便方法

由于

Answer 1

你应该在

中创建你的app组件

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

您的应用组件应使用开关和路由元素处理子组件，类似的东西：

<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

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

2 个答案: