Проблема с созданием общего компонента маршрутизатора реакции с помощью приложения create-react-app - Ошибка: не удалось выполнить инвариант: не следует использовать <Link>за пределами <Router>

Question

• 1000 для двух аналогичных приложений реагирования с использованием create-react-app. Когда я вытаскиваю компонент с элементом <Link> в общий компонент, я получаю инвариантную ошибку, потому что он не видит, что я вызываю его внутри <BrowserRouter>

Я думаю, вы не можете есть ли какие-либо общие компоненты, которые используют реактивный маршрутизатор, потому что им нужно видеть в том же каталоге, что <BrowserRouter> доступен? Так ли это (или есть способ исправить это, а я делаю это неправильно).

Помощь приветствуется!

Мои index.ts в (app / sr c)

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

serviceWorker.unregister();

my App.tsx (in app / sr c)

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import NavBar from '../../common/src/NavBar/NavBar'; // this only works if it's ./NavBar/NavBar in same src directory
import Footer from '../../common/src/Footer/Footer'

class App extends Component {
  render() {
    return (
      <div>
        <NavBar/>
        <p>Work in progress.</p>
        <Footer/>
      </div>
    );
  }
}

export default App;

my NavBar.tsx (обычно / sr c и переносится с помощью response-app- перепрограммирован и removeModuleScopePlugin () или скомпилирован и в общем / lib как NavBar. js и импортирован - я получаю ту же ошибку в обоих направлениях)

import React from 'react';
import { Link } from 'react-router-dom';

function NavBar() {
  return (
    <nav className="navbar navbar-dark bg-primary fixed-top">
      <Link className="navbar-brand" to="/">
        Logo
      </Link>
      <div>
        description
      </div>
    </nav>
  );
}

export default NavBar;