React useEffect is not triggering on route change

Question

I expect that console.log('Refresh') runs every time the route changes (switching from Component1 to Component2). But it's only triggering on first render. Why?

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

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

App.js:

import React, { useEffect } from 'react';
import { Switch, Route } from 'react-router-dom';
import Nav from './Nav';
import Component1 from './Component1';
import Component2 from './Component2';

const App = () => {

  useEffect( () => console.log('Refresh'));

  return (
        [<Switch>
            <Route                            component = {Nav}/>
        </Switch>,
        <Switch>
            <Route exact path = '/component1' component = {Component1}/>
            <Route exact path = '/component2' component = {Component2}/>
        </Switch>]
  );
}

export default App;

Nav.js:

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

const  Nav = () => {
  return (
    <div>
        <Link to = '/component1'>Component 1</Link>
        <Link to = '/component2'>Component 2</Link>
    </div>
  );
}

export default Nav;

Component1.js:

import React from 'react';

const  Component1 = () => {

  return (
    <div>
        <p>Hi</p>
    </div>
  );
}

export default Component1;

Component2.js:

import React from 'react';

const  Component2 = () => {
  return (
    <div>
        <p>Bye</p>
    </div>
  );
}

export default Component2;

Where is your `````` component? – sigmus Sep 18 '19 at 06:45 — sigmus, Sep 18 '19 at 06:45
On **`index.js`** (question updated). – Erik Martín Jordán Sep 18 '19 at 08:42 — Erik Martín Jordán, Sep 18 '19 at 08:42

score 22 · Accepted Answer · answered Sep 18 '19 at 09:18

22

The useEffect is not triggered because the App component is not re-rendered, nothing changed in that component (no state or props update).

If you want the App component to re-render when the route change, you can use the withRouter HOC to inject route props, like this :

import { Switch, Route, withRouter } from 'react-router-dom';

const App = () => {

  useEffect( () => console.log('Refresh'));

  return (...);
}

export default withRouter(App);

Example : https://codesandbox.io/s/youthful-pare-n8p1y

answered Sep 18 '19 at 09:18

Mohamed Ramrami

12,026
4
33
49

1

Understood. Good answer. – Erik Martín Jordán Sep 18 '19 at 11:54
2

this did not resolve my issue. in my case useEffect works as expected UNTIL i navigate to a different route, and come back to current route, and then useEffect doesn't fire, seems to happen regardless of listening to specific state var or not. – Sonic Soul Aug 16 '20 at 17:44
@SonicSoul Could you open a new question with your code ? Seems like a different issue. – Mohamed Ramrami Aug 17 '20 at 10:25
2

Use this as of 2021 Router V6 https://stackoverflow.com/a/62389224/2394052 – Stephane Jan 13 '22 at 18:24

score 19 · Answer 2 · answered Feb 16 '20 at 17:40

19

use the key attribute so everytime we render new component (different key)

<Route path='/mypath/:username' exact render= {routeProps =><MyCompo {...routeProps} key={document.location.href} />} />

answered Feb 16 '20 at 17:40

Aliens Dev

251
4
5

You made my day.Thanks you so much – Vishal Shori Dec 04 '20 at 16:52
Cleanest solution to be honest, however my key was a prop to be SSR safe, thanks Aliens – Johan Mendez Jun 21 '21 at 22:42
This should be the top solution. Awesome. – PedroPovedaQ Jul 29 '21 at 09:09
this worked just fine for me – Lucas Gabriel Jul 31 '23 at 11:55

score 7 · Answer 3 · answered Jun 17 '20 at 06:24

7

Use the 2nd argument to useEffect to conditionally apply effect. For example via react-router-dom, you get some properties

const { schoolId, classId } = props

useEffect(() => {
   // fetch something here
}, [schoolId, classId)

Here [schoolId, classId acts as the unique identifier for useEffect to trigger.

answered Jun 17 '20 at 06:24

onmyway133

45,645
31
257
263

Great answer ! Thank you very much !! – matdev Jun 25 '23 at 09:56

foad abdollahi · Answer 4 · 2022-11-21T05:51:59.863

6

Using Hooks:

use useLocation and useLayoutEffect get more efficiency:

   import { useLocation } from "react-router-dom";
//...
   const location = useLocation();
//...
   useLayoutEffect(() => {
    console.log("location",location) 
    
   }, [location])

edited Nov 21 '22 at 05:51

answered May 10 '22 at 10:33

foad abdollahi

1,733
14
32

Fantastic. What I was looking for. – Sean Jun 09 '23 at 00:20

Kingsley Kelechukwu · Answer 5 · 2023-08-05T23:16:58.470

if your are working with an identify :id in your route like in

 import react from 'react';
 import { Route,Routes } from 'react-router-dom';
 import Properties from './pages/properties';


 function App() {
   return (
           <div>
     <Routes>
         <Route path="/" element={<Home/>} >
            <Route path="properties/:id" element={<Properties/>}/> 
         </Route> 
    </Routes>
 </div>
 );
 }

and you want the properties component to re-render based on the identify :id

you can simply write this way in the properties component

 import React,{useEffect} from "react";
 import {  useParams} from "react-router-dom";

 export default Properties(){
   useEffect(()=>{

   return (){...}
  },[useParams.id])


 return <div> .....</div>
 }

it will always re-render the properties component for every change in the search parameter :id

React useEffect is not triggering on route change

5 Answers5

Linked