How to call a function from a Route in v6

user_5091533 0
Viewed 2371

Previously, in react-router-dom v5 (or below) you could use:

<Route path="/" render={() => {doSomething(); return <ComponentName />}} />

to both fire a function and create a route without having to create any extra code inside of the ComponentName component. With render being replaced with element in v6, how do you now accomplish this?

react-router-dom react-router reactjs
2 Answers

In react-router-dom v6 there are no longer any props to render a function in the Route, there exists the element prop that takes a JSX literal. Create a wrapper component that issues the side-effect, and wrap the component you are rendering on the route. Use the useEffect hook as unintentional side-effects in React should be avoided.

const DoSomethingWrapper = ({ children }) => {
  useEffect(() => {
    doSomething();
  }, []);
  return children;
};

...

<Route
  path="/"
  element={(
    <DoSomethingWrapper>
      <ComponentName />
    </DoSomethingWrapper>
  )}
/>
user_86908570

This is the answer I came up with:

const doSomething = (arg1, component) => {
  //posting arg1 as an example of whatever you are wanting to do.
  console.log(arg1);
  return component;
};

<Route path="/" element={doSomething("string", <Home />)} />

Edit* Marking this as the answer since it is most similar to the code in the original question, but is is not the only correct answer. Please consider the other great answer/s, which may be more appropriate, depending on your needs.

user_50915330
Related