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

Question

Can I get some advice on how to use my AppMain component which uses props passed down from react-router to get the data.

Here is what I have changed so far

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>

As you can see, I have attempted multiple methods of showing AppMain and Home / SiteDetails at the same time. This method gives me this warning which shows AppMain but none of its children:

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

The other method of using <AppMain> doesn't pass the props.location.state... which I am trying to convert my AppMain code to here:

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();
}

Answer 1

What if:

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>

If you need location props in your AppMain , just wrap it with withRouter component: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

Answer 2

Turns out all I needed to do was add a Route to AppMain outside the Switch with no path.

Here is my fix:

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