Можно ли глобально определить ссылки для использования определенного компонента c?

Question

Я сейчас пытаюсь использовать Nav с react-router. По умолчанию страница перезагружается, поэтому я пытаюсь использовать компонент Link из react-router-dom.

Довольно сложно сохранить стиль по умолчанию при замене linkAs.

Есть ли какой-нибудь глобальный способ переопределить поведение навигации по ссылкам?
Например, определение глобальной функции рендеринга ссылки, которую я затем могу настроить для рендеринга компонента Link из react-router-dom?

Answer 1

Да, это возможно!

Требуются 2 вещи:

1. Создайте компонент-оболочку, который переводит Nav API в ссылки response-router-dom.
2. Укажите свойство linkAs для компонента Nav.

Компонент Wrapper

Это простой компонент, который создает ссылку response-router-dom при использовании стилей от Fabri c:

import { Link } from "react-router-dom";
const LinkTo = props => {
  return (
    <Link to={props.href} className={props.className} style={props.style}>
      {props.children}
    </Link>
  );
};

Укажите компонент для использования в Nav

 <Nav groups={links} linkAs={LinkTo} />

Также создали полный рабочий пример в https://codesandbox.io/s/xenodochial-wozniak-y10tr?file= / src / index.tsx: 605 -644