Question

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

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组件正常呈现。但是，当我尝试使用例如PostDetails到达/foo/bar组件时，它不会被击中。

我尝试使用路线定义的顺序以及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：没有命中嵌套参数的路由

2 个答案: