0

我有一个<HashRouter>包装包含组件的<Link>组件，但是，我仍然收到错误Error: Invariant failed: You should not use <Link> outside a <Router>。是否有一些层次结构说您必须拥有比我更高级别的链接？我有<Link> 一个下拉菜单。像我的应用程序是：

<HashRouter>
  <ComponentA>
    <ComponentB>
      <Link to="/my-path"/>
    </ComponentB>
  </ComponentA>
</HashRouter>

编辑： 我正在做的是<Link>在我从库中获得的下拉列表中添加一个自定义选项。它说我可以将自定义元素添加到我的下拉选项中。我正在制作的下拉菜单很复杂，里面有按钮，如果你点击标题，我想链接到一个地方。那里是Link进来的。当我在那里添加链接时，会出现错误消息，但当我将链接直接添加到使用下拉列表的组件时不会出现。这就是我拥有该组件的方式，该组件不起作用。这只是模拟数据，我使用的数据是在 a 中计算的.map：


const CustomLink = () => <Link to="/some-path">Title of link</Link>;

const data = [{
    selected_key: 'id1',
    content: [<CustomLink />, <CustomButton />]
  },
  ...
]

return <DropdownFromLibrary data={data} />;

我想要/需要在数组中添加组件，但上面的示例不起作用。下面的操作确实可以使链接与下拉菜单位于同一组件内，但这不是我想要的，因为我需要计算每个选项的新路径：

return (
  <>
    <CustomLink />
    <DropdownFromLibrary data={data} />
  </>
);

解决方案

import { useHistory } from 'react-router-dom';

...

const history = useHistory();
const CustomLink = ({ id, title }) => <div onClick={() => history.push(`/some-title/${id}`)}>{title}</div>
const data = [{
    selected_key: 'id1',
    content: [<CustomLink />, <CustomButton />]
  },
  ...
]

return <DropdownFromLibrary data={data} />;
4

1 回答 1

0

您有一个错误，因为 Link 必须进入 <componentB> 内部。我的意思是在componentB的函数内部。将您的返回元素包装在链接中。

于 2020-10-05T15:43:06.317 回答