outside error message in React

Question

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.

I can't test right now, as I'm at work, but shouldn't the come from `react-router-dom` as well ? Like in the docs https://reactrouter.com/web/guides/quick-start/1st-example-basic-routing — Julien Ripet, Oct 20 '21 at 13:27
Also, there's a guide about using redux with the history, and a dedicated library for it at the end. It might be something to look into — Julien Ripet, Oct 20 '21 at 13:31
@JulienRipet I thought too but it seems that this is another thing. If you want on use custom history object you should use Router as mentionned in this doc https://reactrouter.com/web/api/Router. And thank you I'll look into the guide. — Simon, Oct 20 '21 at 13:41

Coupz · Answer 1 · 2021-10-21T09:43:21.013

2

Looks like you need to use BrowserRouter or one of the others ones according to the good answers here: You should not use <Link> outside a <Router>

And one other thing: try to put your li elements outside of your <Link> tags, so that you have ul > li > Link

edited Oct 21 '21 at 09:43

answered Oct 20 '21 at 13:29

Coupz

531
7
11

Thank you for your response, I've tried this but then, when I try to use history.push() in my actions the url updates but the component doesn't render. I look in the doc that has been sent above. – Simon Oct 20 '21 at 13:39
Are you using React-Router's useHistory hook? – Coupz Oct 21 '21 at 09:45
in my useHistory file I've put this: `import { createBrowserHistory } from 'history'; export const myHistory = createBrowserHistory();` PS: I've changed a bit the names but the logic is the same – Simon Oct 21 '21 at 10:54

outside error message in React

1 Answers1