Как заставить ссылку из react-router-dom работать дальше внутри приложения?

#reactjs

Вопрос:

У меня есть <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 это происходит. Когда я добавляю ссылку туда, появляется сообщение об ошибке, но не тогда, когда я добавляю ссылку непосредственно к компоненту, который использует выпадающий список. Вот как у меня есть компонент, который не работает. Это просто издевательские данные, данные, которые я использую, вычисляются внутри .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} />;

1. Нет никаких ограничений на то, где в маршрутизаторе Link должен появиться. Вероятно, вам не хватает чего-то, что вы не включили в свой вопрос. Если вы можете, пожалуйста, предоставьте минимальный рабочий пример, который воспроизводит проблему, например, в codesandbox.

2. Также смотрите Этот codesandbox , который демонстрирует, что представленный вами код работает должным образом.

Ответ №1:

У вас ошибка, потому что ссылка должна идти внутри < ComponentB> . Я имею в виду внутри функции ComponentB. Оберните возвращаемые элементы ur внутри ссылки.