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。

- Hinrich

---

你的路由结构是什么，有没有父级路由或子路由？ - Shubham Khatri

@ShubhamKhatri 不，就这些。已更新代码，让您看到整个组件。 - Hinrich

我想一次只显示一个组件。我添加了 Switch 组件，但没有任何区别。我在浏览器中访问了此 URL http://localhost:3000/foo/bar。我没有使用 BrowserRouter（也许我应该使用吗？） - Hinrich

如果您没有使用browserRouter，那么您应该访问的是 http://localhost:3000/#/foo/bar。 - Shubham Khatri

哦，事实上我正在使用浏览器路由器。抱歉混淆了并造成困惑。 - Hinrich

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

- ChrisR

---

OP使用的是exact，因此在这里使用Switch不会有任何区别。 - Shubham Khatri

我尝试了这个方法，但实际上并没有什么不同。 - Hinrich

Answer 2

我找到了解决方案。只是组件导出时有一个拼写错误，像这样

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

默认值中缺少l。

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

- Hinrich