Estoy tratando de establecer un objeto de historial personalizado en mi ruta para poder usarlo en mis acciones de redux. He visto que deberíamos usar <Router> de 'react-router' y configurar el objeto de historial en él. Eso es lo que he hecho.

Aplicación.js

 //** Import router */ import { Switch } from 'react-router-dom'; import { Router } from 'react-router'; import history from './hooks/useHistory'; const App = () => { return ( <Router history={history}> <MainNavigation /> <Switch> <Routes /> </Switch> </Router> ); }; export default App;

MainNavigation.js

 const MainNavigation = () => { return ( <> <div className='navigation'> <ul> <Link to='/'> <li>Home</li> </Link> <Link to='/contact'> <li>Contact</li> </Link> <Link to='/about'> <li>A propos</li> </Link> <Link to='/user-profile'> <li>Votre compte</li> </Link> </ul> </div> </> ); }; export default MainNavigation;

Y finalmente, el Routes.js

 //** Import routers */ import { Redirect, Route } from 'react-router-dom'; const Routes = () => { return ( <> <Route path='/' exact component={MainLayout} /> <Route path='/about' exact component={About} /> <Route path='/contact' exact component={ContactForm} /> <Route path='/user-profile' exact component={UserAccount} /> <Redirect to='/' /> </> ); }; export default Routes;

No entiendo por qué dice que no debe usar <Link> fuera de un <Router> ya que el componente que incluye el <link> (MainNavigation.js) está dentro de las etiquetas <Router> .