reactjs - react 路由器 : Route with nested params not hit

Question

在我的 react 应用程序中，我设置了这样的路线

class App extends Component {
  render() {
    return (
      <div className="app">
        <Header />
        <Route exact path="/" component={PostList} />
        <Route exact path="/:category" component={PostList} />
        <Route exact path="/:category/:postid" component={PostDetails} />
      </div>
    );
  }
}

/ 和 foo 正在渲染 PostList 组件。但是，当我尝试使用例如 /foo/bar 访问 PostDetails 组件时，它没有被命中。

我尝试调整路由定义的顺序以及 exact 属性，但没有成功。没有收到任何错误，devtools 中的检查器只是不显示组件应该位于的任何输出。

我在这里缺少什么？我正在使用 react-router-dom@4.2.2。

Answer 1

如果您只想显示其中一条路线，则应使用 Switch .

class App extends Component {
  render() {
    return (
      <div className="app">
        <Header />
        <Switch>
            <Route exact path="/" component={PostList} />
            <Route exact path="/:category" component={PostList} />
            <Route exact path="/:category/:postid" component={PostDetails} />
        </Switch>
      </div>
    );
  }
}