代码之家  ›  专栏  ›  技术社区  ›  p7adams

防止嵌套的<link/>组件从以前的<link/>继承路径(react router 4)

  •  0
  • p7adams  · 技术社区  · 6 年前

    我有一个数据库板组件,我有一个反应路由器 <Link/> 链接到的组件

    http:<procjethos>/team
    

    里面 <Team/> 组件我有一个 <链接/gt; 应链接到的组件

    http:<projecthost>/list/:listId
    

    但是,它继承了以前的链接,我得到

    http<projecthost>/team/list/:listId
    

    //仪表板.jsx

      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>
        );
    

    //TeaS.JSX

        <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中实现所需的行为?

    1 回复  |  直到 6 年前
        1
  •  1
  •   Shubham Khatri    6 年前

    添加一个 / 链接路径之前

     <Link to={`/list/${list._id}`} replace>
           <CardItem name={list.name} />
     </Link>