首页 文章

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

提问于
浏览 次
2

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

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 .

reactjs react-router react-router-dom

2 回答

  • 0

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

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

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

    默认情况下缺少 l .

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

    回复于

相关问题