React 如何创建组件保存历史导航路径答案

【问题标题】：React how to create a component to save the history navigation pathReact 如何创建组件保存历史导航路径
【发布时间】：2021-03-01 14:20:06
【问题描述】：

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

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

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

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

我不知道如何创建组件以仅传递新的 Nav.Item。有什么帮助吗？

【问题讨论】：

hmmm....你能详细说明一下吗？并更新问题。我不明白你在复制粘贴什么以及为什么
对不起@ReyYoung，我现在正在做
无需抱歉。很酷。
@ReyYoung 我已经修改了问题，我希望现在会更清楚

标签： html css reactjs react-native

【解决方案1】：

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

包含路线信息的对象数组

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

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

const Navigation = ({ additionalNavigations = [] }) => {
  /*
   * You will always get you default navigation if you don't have any additional
   * navigation send as a prop.
   *
   * We are merging our default navigation plus the new navigations you want
   */
  const allNavigations = [...defaultNavigations, ...additionalNavigations];
  // your can get your activekey from history.params

  return (
    <Nav activeKey='/home' className='history-path'>
      <div>you are here:</div>
      {allNavigations.map(({ name, route, extraHistoryParams = {} }) => (
        <Nav.Item key={name}>
          <Nav.Link
            href={route}
            onSelect={() => history.push(route, extraHistoryParams)}
          >
            Home
          </Nav.Link>
        </Nav.Item>
      ))}
    </Nav>
  );
};

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

const BasicComponentWithDefaultNavigation = () => {
  return <Navigation />;
};

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

// This should have the format of the default navigation where extraHistoryParams is
// not required as this is optional because we have used default empty object in Navigation component
const newNavigation = [
  { name: 'Desc', route: '/desc', extraHistoryParams: { from: 'Create_Description' } },
];
const ComponentWithAdditionalNavigation = () => {
  return <Navgiation additionalNavigations={newNavigation} />;
};

【讨论】：