遷移到react-router v4-帶子級的路由，需要路由道具

Question

我可以獲取有關如何使用AppMain組件的一些建議AppMain ，該組件使用從react-router傳遞下來的props來獲取數據。

到目前為止，這是我已更改的內容

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但不顯示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();
}

Answer 1

如果：

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組件一起包裝withRouter ： https : //github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

Answer 2

事實證明，我要做的就是在Switch外部添加到AppMain的Route ，而沒有路徑。

這是我的解決方法：

  <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>