javascript - 迁移到react-router v4-带子级的路由，需要路由 Prop

我可以获取有关如何使用我的AppMain组件的一些建议吗，该组件使用从react-router传递的道具来获取数据。

到目前为止，这是我已更改的内容

v3：

<Router history={browserHistory} >
  <Route component={AppMain} exact path="/" >
    <IndexRoute name="Home" component={Home} />
    <Route name="Site Details" path="/details" component={SiteDetails} />
    <Route name="Home" component={Home} path="*" />
  </Route>
</Router>

v4

  <Router>
        <div>
          {/*<AppMain>*/}
          <Route component={AppMain} >
            <main>
              <Grid fluid className={classnames('app-content', { 'expanded': !this.state.mobileView && this.state.open })}>
                <Switch>
                  <Route name="Home" exact path="/" component={Home} />
                  <Route name="Site Details" exact path="/details" component={SiteDetails} />
                </Switch>
              </Grid>
            </main>
          </Route>
          {/*</AppMain>*/}
        </div>
  </Router>

如您所见，我尝试了同时显示AppMain和Home / SiteDetails的多种方法。这个方法给了我这个警告，它显示了AppMain，但是没有一个孩子：

You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored

使用<AppMain>的另一种方法没有传递props.location.state...，我试图将AppMain代码转换为此处：

v3

if (props.params.division !== undefined) {
  this.getDivision(props.params.division);
} else {
  this.getDivisions();
}

v4

if (props.location.state !== undefined) {
  if (props.location.state.division !== undefined) {
    this.getDivision(props.location.state.division.code);
  } else {
    this.getDivisions();
  }
} else {
  this.getDivisions();
}

最佳答案

如果：

React Router v4：

     <Router>
        <div>
          <AppMain>
            <main>
              <Grid fluid className={classnames('app-content', { 'expanded': !this.state.mobileView && this.state.open })}>
                <Switch>
                  <Route name="Home" exact path="/" component={Home} />
                  <Route name="Site Details" exact path="/details" component={SiteDetails} />
                </Switch>
              </Grid>
            </main>
          </AppMain>
        </div>
     </Router>

如果您在AppMain中需要定位道具，只需用withRouter组件将其包装：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md