I'm trying to set a custom history object in my route to be able to use it my redux actions. I've seen that we should use <Router> from 'react-router' and set the history object in it. That's what I've done.

App.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;

And Finally, the 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;

I don't understand why it says You should not use <Link> outside a <Router> as the component which includes the <link> (MainNavigation.js) is inside the <Router> tags.