Question

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

我有2个组成部分。（主要和团队）

主要组件

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值。

会发生什么？如您所见，“团队”组件是我的主页。因此，在这里，当我单击团队时（没有团队组件，您可以想到一张牌），我得到了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

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

无法调用路线中的组件

2 个答案: