首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >阻止嵌套的<Link/>组件从以前的<Link/>继承路径(React router 4)

阻止嵌套的<Link/>组件从以前的<Link/>继承路径(React router 4)
EN

Stack Overflow用户
提问于 2019-02-21 17:15:51
回答 1查看 108关注 0票数 1

我有一个仪表板组件,其中有链接到的React路由器<Link/>组件

代码语言:javascript
运行
复制
http:<procjethos>/team

<Team/>组件中,我有一个应该链接到的<Link/>组件

代码语言:javascript
运行
复制
http:<projecthost>/list/:listId

但是相反,它继承了前面的链接,我得到了

代码语言:javascript
运行
复制
http<projecthost>/team/list/:listId

// Dashboard.jsx

代码语言:javascript
运行
复制
  render() {
    const { shoppingLists, teams } = this.props;

    return (
      <Fragment>
        <Toolbar isHomePage/>
        <div className="wrapper">
          <div className="dashboard">
            <h2 className="dashboard__heading">
              <TeamIcon />
              Cohorts
            </h2>
            <ul className="dashboard__list">
              {_map(teams, team => (
                <li className="dashboard__list-item" key={team._id}>
                  <Link to={`team/${team._id}`}>
                    <CardItem name={team.name} />
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </Fragment>
    );

// Team.jsx

代码语言:javascript
运行
复制
    <Fragment>
        <Toolbar />
        <div>
          Cohort of id:
          {id}
          <ul>
            {_map(lists, list => (
              <li className="dashboard__list-item" key={list._id}>
                <Link to={`list/${list._id}`} replace>
                  <CardItem name={list.name} />
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </Fragment>

如何在带有嵌套链接的React-Router 4中实现所需的行为?

EN

Stack Overflow用户

回答已采纳

发布于 2019-02-21 17:19:03

在链接路径前添加/

代码语言:javascript
运行
复制
 <Link to={`/list/${list._id}`} replace>
       <CardItem name={list.name} />
 </Link>
票数 1
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54803285

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档