无法调用路由中的组件

Question

基本上，我试图传递一个 id 值并呈现相关数据。但是，当我想调用组件来呈现数据时，我的路由不会调用该组件。

我有两个组件。（主要和团队）

主要成分

render() {
  const OneTeam = ({match}) => {
  console.log("Never logs this!");
  return (
    /*Let's assume I am returning simple HTML here */
    <p>Hello</p>
  );
};

return (
  <Switch>
    <Route
      path="/"
      component={() => <Teams teams={this.props.teams} />}
    />
    <Route path="/:teamId" component={OneTeam} />
  </Switch>
);

}

它永远不会进入 OneTeam 组件。

团队组件

 <Link to={`/${team.id}`}>Details</Link>

我可以正确传递id值。

会发生什么？如您所见，Teams 组件是我的主页。所以在这里，当我点击一个团队时（没有团队组件，你可以想到一张卡片），我得到了 id 并且使用 <Link> 我可以将我的 id 推送到 URL (localhost:5001/98 )，但是，没有其他事情发生。在主要组件中，<Route path ="/:teamId" component={OneTeam} 似乎根本不起作用，因为我无法渲染 OneTeam 组件，即使我无法在该组件中 console.log。

我不确定我错过了什么，因为我只是想做一件非常基本的事情。顺便说一句，如果有助于弄清楚，我使用Redux。为什么我无法进入 OneTeam 组件或功能。

Answer 1

在 / 上使用参数是不常见的，因为它会使您的应用程序扩展到其他页面变得困难，并且在区分任何其他路由是团队 ID 还是其他页面时不必要地复杂。你应该这样做：

    <Route
      exact
      path="/"
      component={() => <Teams teams={this.props.teams} />}
    />
    <Route exact path="/team/:teamId" component={OneTeam} />

然后是

    <Link to={`/team/${team.id}`}>Details</Link>

Answer 2

您应该交换调用路由的顺序。它会呈现它匹配的第一条路线，这是你的家，你的细节视图永远不会被评估。但是，如果您切换顺序，详细视图将在此之前进行评估，如果匹配，将被渲染。

无法调用路由中的组件

Cannot call the component in route

reactjs

react-router-v4