How to call function after routing in React?

Question

Let's say there is a website with routes: /routeA, /routeB ... /routeZ

Each of those routes render a ComponentA, ComponentB ... ComponentZ

How to run a particular piece of code no matter which route has been reached?

The piece of code is irrelevant. It could be console.log("Awesome stackoverflow")

Obviously, in each component I could call useEffect and call the piece of code there. However, this is repetitive since I would have to write Z useEffect for the Z components we have. Instead, I am looking for a way to execute the piece of code without needing to repeate code through all components.

route is reaching inside some component, for example App, so in useEffect or ComponentDidMount you can run any code you like — Dmitry Reutov
– Dmitry Reutov, Commented May 30, 2020 at 15:13
Hi Dmitry. Thank you. I am looking for a way to execute the code without calling it from the components. I updated the question. — fjplaurr
– fjplaurr, Commented May 30, 2020 at 15:50
yes, but answer is the same - no need to call it inside route component, call it in their parent component — Dmitry Reutov
– Dmitry Reutov, Commented May 30, 2020 at 15:52

Shawn97 · Accepted Answer · 2022-06-06 08:43:42Z

2

You can use the useLocation hook that is a part of react-use I can confirm this bit of code works using react-router, and this useEffect has to reside in the same component with your <Router> component, for me this was App.js

 const location = useLocation();

  useEffect(() => {
    // code to run on every route
  }, [location]);

answered Jun 6, 2022 at 8:43

Shawn97

213 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ttt · Accepted Answer · 2020-05-30 15:18:28Z

1

//if you are using class
class YourComponent extends React.Component{
    componentDidMount = () => {
        //your logic here
    }
}

//if you are using hook
const YourComponent = () => {
    useEffect(() => {
       //your logic here
    },[])
}

answered May 30, 2020 at 15:18

ttt

1,8091 gold badge12 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to call function after routing in React?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related