reactjs - react-router 4 中 IndexRoute 的替代方案

Question

我正在学习一门类(class)，其中作者使用 react-router 编写了一些用于 react 路由的代码。版本 3。

<Router history={browserHistory} >
  <Route path="/" component={Main}>
      <IndexRoute component={PhotoGrid}></IndexRoute>
      <Route path="/view/:postId" component={Single}>
   </Route>
</Router>

在学习类(class)时(我正在使用 router 版本 4)，我开始知道现在 <IndexRoute>不存在。我在谷歌上搜索了替代方案，发现 exact是备选方案。但是我不知道怎么用exact为了满足这个要求。作者想要Main组件始终在 DOM 上，并且基于 url 只有子组件应该更改(即 Single 或 PhotoGrid )。
我尝试了下面的代码，这当然是错误的代码:

 <BrowserRouter>
    <Switch>
      <Route path="/" component={Main} />
      <Route exact path="/" component={PhotoGrid} />
      <Route path="/veiw/:postId" component={Single} />
    </Switch>
  </BrowserRouter>    

我的组件是:

class Main extends React.Component {
  render() {
    return (
        <div>
          <h1>
            <Link to="/">Reduxtagram</Link>
          </h1>
          {React.cloneElement(this.props.children, this.props)}
        </div>           
    );
  }
}

class PhotoGrid extends React.Component {
  render() {
    return <div className="photo-grid">PhotoGrid</div>;
  }
}

class Single extends React.Component {
  render() {
    return <div className="single-photo">Single</div>;
  }
}

Answer 1

Switch 组件只会呈现第一个匹配的 Route。

您可以将 Main 组件用作常规组件，并将 Switch 用作 children。

<BrowserRouter>
  <Main>
    <Switch>
      <Route exact path="/" component={PhotoGrid} />
      <Route path="/view/:postId" component={Single} />
    </Switch>
  </Main>
</BrowserRouter>