I had this routing configurations and it works perfecly, only one thing keeps anoying me: even though navigating the app works, when I go to address bar and hit enter, it redirects me to /add-user even if I don't change the url and hit enter.
Here is my routes configuration:
function AppRoutes({ setLoading }) {
const routes = [
{
key: keys.ADD_USR,
path: '/add-user',
// eslint-disable-next-line react/display-name
renderComponent: (crumbs) => <AddUserData crumbItem={crumbs} />,
crumbs: [
{
selected: 'false',
link: `${prefix}/add-user`,
accessibilityText: 'Add user',
linkTtile: 'Add user',
},
],
},
{
key: keys.VIEW_USR,
path: '/view-user',
// eslint-disable-next-line react/display-name
renderComponent: (crumbs) => <UserDetails crumbItem={crumbs} />,
crumbs: [
{
selected: 'false',
link: `${prefix}/view-user`,
accessibilityText: 'View user',
linkTtile: 'View user',
},
],
},
{
key: keys.USER_GRID,
path: '/user-grid',
// eslint-disable-next-line react/display-name
renderComponent: (crumbs) => <UserGrid crumbItem={crumbs} />,
crumbs: [
{
selected: 'false',
link: `${prefix}/user-grid`,
accessibilityText: 'User grid',
linkTtile: 'User grid',
},
],
},
]
return (
<div className="app-container">
<Switch>
{routes.map(({ key, path, crumbs, renderComponent }) => {
return (
<Route key={key} path={path}>
{renderComponent(crumbs)}
</Route>
)
})}
<Redirect to="/add-user" />
</Switch>
</div>
)
}