React Router：未命中嵌套参数的路由答案

【问题标题】：React Router: Route with nested params not hitReact Router：未命中嵌套参数的路由
【发布时间】：2018-06-26 12:55:35
【问题描述】：

在我的 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。

【问题讨论】：

你的确切路由结构是什么，有父路由还是子路由？？
@ShubhamKhatri 不，仅此而已。更新了代码，让您可以看到整个组件。
当您点击 /foo/bar 时，您希望 PostList 和 PostDetails 显示或仅显示 PostDetails ？
我不确定这是否可行，但出于好奇，如果您将<Route /> 组件与<Switch> 包装在一起会发生什么？（从 react-router-dom 导入）
你在用BrowserRouter吗，你怎么访问/foo/bar

标签： reactjs react-router react-router-dom

【解决方案1】：

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

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

默认缺少l。

奇怪的是，我在转译过程中没有任何错误。对不起，感谢您的努力！

【讨论】：

【解决方案2】：

如果您只想显示其中一条路线，则应使用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>
    );
  }
}

【讨论】：

OP 使用精确，因此 Switch 在这里根本不会有所作为
我试过了，实际上并没有什么不同。