reactjs - react-router 4中IndexRoute的替代品

Question

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

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

在学习课程时（我正在使用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>;
  }
}

标签： reactjsreact-router-v4

Answer 1

该Switch组件只会渲染第Route一个匹配的。

您可以将Main组件用作常规组件并使用Switchas children。

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