时间戳

首页 > 解决方案 > 如何动态链接到组件

reactjs - 如何动态链接到组件

问题描述

我有一个用户数组，我在卡片上显示每个用户。我只显示卡片上的头像、姓名和姓氏。但是当点击每张卡片时，我想动态地转到UserInfo该卡片的组件并显示所有信息。我是 react-router 的新手，所以为了了解它的工作原理，我尝试使用 react-router。我Link与 ids 一起使用，但它总是显示Main组件。它从不显示UserInfo组件。我做错了什么，但无法弄清楚。你能帮我吗 ？

这是路线：

return (
  <Router history={history}>
    <div>
      <Switch>
        <Route path="/" component={Main} true />
        <Route path="/users/:id" component={UserInfo} />
      </Switch>
    </div>
  </Router>
);

这是卡片组件：

import React from "react";
import { Link } from "react-router-dom";

function Card({ id, avatar, first_name, last_name }) {
  return (
    <Link className="card__item" to={`/users/${id}`}>
      <div
        className="card__image"
        style={{ backgroundImage: `url(${avatar})` }}
      ></div>
      <div className="card__text">
        <div>
          {first_name} {last_name}
        </div>
      </div>
    </Link>
  );
}

export default Card;

这就是主要组件返回的内容

return (
  <section className="cards container">
    <div className="card__grid">
      {users.map((user) => {
        return <Card key={user.id} {...user} />;
      })}
    </div>
  </section>
);

标签： reactjsreact-router

解决方案

<Route>如果 prop 的任何部分path与当前路径匹配，则组件渲染。所以如果你有这个：

      <Switch>
        <Route path="/" component={Main} true />
        <Route path="/users/:id" component={UserInfo} />
      </Switch>

第一个<Route>将始终匹配，因为/同时匹配/ 和 /users/:id。

组件的顺序<Route>很重要；通常，您希望将最具体的路由路径放在最前面，将最不具体的路由路径放在最后作为“全部”或后备。在您的情况下，您只需要交换订单。

      <Switch>
        <Route path="/users/:id" component={UserInfo} />
        <Route path="/" component={Main} true />
      </Switch>

编辑：或者，您可以设置exact道具，这将强制匹配准确。这迫使您放置exact多条（甚至全部）路线，与简单地按照它们应该匹配的顺序对路线进行排序相比，这可能是不可取的。

https://reactrouter.com/web/api/Route/path-string-string

推荐阅读