Html 反应如何创建组件以保存历史导航路径

我正在研究react，我刚刚创建了这个项目，以便打印用户的历史路径。 代码如下：

return (
<div className="container">
    <Row>
      <Col>
        <Nav
          activeKey="/home"
          className="history-path"             
        >
          <div>you are here:</div>
          <Nav.Item>
            <Nav.Link href="/home" onSelect={() => history.push("/home", { from: "2" })}>Home</Nav.Link>
          </Nav.Item>
          <span>/</span>
          <Nav.Item>
            <Nav.Link href="/labour_desc" onSelect={() => history.push("/labour_desc", { from: "2" })} disabled>Description</Nav.Link>
          </Nav.Item>
        </Nav>
</div>
)

返回(
你在这里：
history.push（“/home”，{from:“2”}}>home
/
history.push（“/labour_desc”，{from:“2”}）已禁用>说明
)

现在，我正在复制和粘贴导航，每次添加新链接。 例如，在下一页中，导航将为：

        <Nav
          activeKey="/home"
          className="history-path"             
        >
          <div>you are here:</div>
          <Nav.Item>
            <Nav.Link href="/home" onSelect={() => history.push("/home", { from: "2" })}>Home</Nav.Link>
          </Nav.Item>
          <span>/</span>
          <Nav.Item>
            <Nav.Link href="/labour_desc" onSelect={() => 
history.push("/labour_desc", { from: "2" })} disabled>Description</Nav.Link>
          </Nav.Item>
<span>/</span>
          <Nav.Item>
            <Nav.Link href="/new_desc" onSelect={() => 
              history.push("/new_desc", { from: "CreateDescription" })} 
              disabled>Create Description</Nav.Link>
          </Nav.Item>
        </Nav>

你在这里：
history.push（“/home”，{from:“2”}}>home
/
history.push（“/labour_desc”，{from:“2”}）已禁用>说明
/
history.push（“/new_desc”，{from:“CreateDescription”}）}
禁用>创建描述

我不知道如何创建组件以便只传递新的Nav.Item。

---

有什么帮助吗？

因此，根据您的问题，您需要一个默认包含一些导航链接的组件，但该组件还应负责为不同的页面或组件添加新链接

包含路线信息的对象数组

根据导航对象创建导航的组件

const-Navigation=（{additionalNavigations=[]}）=>{
/*
*如果没有任何额外的导航，您将始终获得默认导航
*导航作为道具发送。
*
*我们正在合并默认导航和您想要的新导航
*/
const allNavigations=[…默认导航，…附加导航]；
//您可以从history.params获取activekey
返回(
你在这里：
{allNavigations.map（{name，route，extraHistoryParams={}}）=>(
history.push（路径，历史外参数）}
>
家
))}
);
};

上述导航组件的实现 只需要默认链接的组件

const basicComponent with defaultNavigation=（）=>{
返回；
};

现在，组件需要一个额外的路由或链接。您可以添加更多路线

//这应该具有默认导航的格式，其中extraHistoryParams是
//不需要，因为这是可选的，因为我们在导航组件中使用了默认的空对象
常量newNavigation=[
{name:'Desc'，route:'/Desc'，extraHistoryParams:{from:'Create_Description'}，
];
const ComponentWithAdditionalNavigation=（）=>{
返回；
};

hmmm。。。。你能更精确地阐述一下吗。并更新问题。我不明白你在复制粘贴什么，为什么@ReyYoung，我现在正在做，不需要道歉。“这很酷。”ReyYoung我已经修改了这个问题，我希望现在能更清楚

const defaultNavigations = [
  { name: 'Home', route: '/home', extraHistoryParams: { from: 2 } },
  {
    name: 'Description',
    route: '/labour_desc',
    extraHistoryParams: { from: 2 },
  },
];