React-Router - Route re-rendering component on route change

Found the reason this is happening straight from a developer (credit Tim Dorr). The route is re-rendering the component every time because it is an anonymous function. This happens twice down the tree, both in App and Routes (within Loadable function), below respectively.

<Route path="/" component={() => <Routes userRole={user.Role} />} />

needs to be

<Routes userRole={user.Role} />

and

loader: () => import('./systemAdminRoutes/SystemAdminRoutes')

Basically my whole approach needs to be rethought

EDIT: I eventually fixed this by using the render method on route:

<Route path="/" render={() => <Routes userRole={user.Role} />} />

Bumped into this problem and solved it like this:

In the component:

import {useParams} from "react-router-dom";
    
const {userRole: roleFromRoute} = useParams();
const [userRole, setUserRole] = useState(null);


useEffect(()=>{
    setUserRole(roleFromRoute);
},[roleFromRoute]}

In the routes:

<Route path="/generic/:userRole" component={myComponent} />

This sets up a generic route with a parameter for the role.

In the component useParams picks up the changed parameter und the useEffect sets a state to trigger the render and whatever busines logic is needed.

},[userRole]);