React Router：没有命中嵌套参数的路由

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

Answer 2

我找到了解决方案。这只是组件导出中的错字

export { defaut as PostDetails } from './post-details/PostDetails'

默认缺少 l。

奇怪的是，我在转译过程中没有出现任何错误。对不起大家，感谢你们的努力！

React Router：没有命中嵌套参数的路由

React Router: Route with nested params not hit

reactjs

react-router

react-router-dom