Component does not change state when going from dynamic route to static - reactjs

Question

I have a route /users that prints a list of users, each user is a link to a dynamic route /users/:cn that displays the user details.
Navigating from /users to /users/:cn is possible but from /users/:cn to /users is not, the url changes but nothing happens, and in the backend log there is no get request to the/users page . But if i am on /users/:cn and navigate to /otherRoute it works fine, or if i am on /users and navigate to /otherRoute also work fine. I think i need to update the state somehow when i am on the dynamic route. Any help?
I already tried wrapping the component userWrapper with withRouter but that does not work.
users.js
import React ,{Component} from "react"
import { BrowserRouter as Router,Switch, Route, withRouter} from "react-router-dom"
import Layout from "../components/layout"
import User from "../components/users"
import MainComponentWrapper from "../components/mainComponentWrapper"
import UserDetails from "../components/userDetails"
const userDetailsWrapper = props => {
const url = "http://localhost:5000/user/" + props.match.params.cn
return (
<MainComponentWrapper url={url}>
<UserDetails />
</MainComponentWrapper>
)
}
const userWrapper = props => {
const url = "http://localhost:5000/user"
return (
<MainComponentWrapper url={url}>
<User />
</MainComponentWrapper>
)
}
const IndexPage = () => (
<div>
<Router >
<Layout>
<Switch>
<Route exact path="/users" component={(userWrapper)}/>
<Route exact path="/users/:cn" component={userDetailsWrapper} />
</Switch>
</Layout>
</Router>
</div>
)
export default IndexPage
layout.jsx
import PropTypes from "prop-types"
import React from "react"
import { makeStyles } from "#material-ui/core/styles"
import Drawer from "#material-ui/core/Drawer"
import CssBaseline from "#material-ui/core/CssBaseline"
import List from "#material-ui/core/List"
import Divider from "#material-ui/core/Divider"
import ListItem from "#material-ui/core/ListItem"
import ListItemIcon from "#material-ui/core/ListItemIcon"
import ListItemText from "#material-ui/core/ListItemText"
import ExitToApp from "#material-ui/icons/ExitToApp"
import PeopleIcon from "#material-ui/icons/People"
import ListIcon from "#material-ui/icons/List"
import ComputerIcon from "#material-ui/icons/Computer"
import { navigate } from "gatsby"
const drawerWidth = 240
const useStyles = makeStyles(theme => ({
root: {
display: "flex",
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
},
drawer: {
width: drawerWidth,
flexShrink: 0,
},
drawerPaper: {
width: drawerWidth,
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
},
toolbar: theme.mixins.toolbar,
}))
function Layout({ children }) {
const classes = useStyles()
const handleLogout = event => {
localStorage.removeItem("access_token")
window.location.replace("/")
}
return (
<div className={classes.root}>
<CssBaseline />
<Drawer
className={classes.drawer}
variant="permanent"
classes={{
paper: classes.drawerPaper,
}}
>
<div className={classes.toolbar} />
<List>
<ListItem button onClick={() => navigate("/users")}>
<ListItemIcon>
<PeopleIcon />
</ListItemIcon>
<ListItemText primary={"Users"} />
</ListItem>
<ListItem button onClick={() => navigate("/machines")}>
<ListItemIcon>
<ComputerIcon />
</ListItemIcon>
<ListItemText primary={"Machines"} />
</ListItem>
<ListItem button onClick={() => navigate("/audits")}>
<ListItemIcon>
<ListIcon />
</ListItemIcon>
<ListItemText primary={"Audit"} />
</ListItem>
</List>
<Divider />
<List>
<ListItem button onClick={handleLogout}>
<ListItemIcon>
<ExitToApp />
</ListItemIcon>
<ListItemText primary={"Logout"} />
</ListItem>
</List>
</Drawer>
<main className={classes.content}>
<div className={classes.toolbar} />
{children}
</main>
</div>
)
}
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
export default Layout
MainComponentWrapper.jsx
import React from "react"
import { makeStyles } from "#material-ui/core/styles"
import CircularProgress from "#material-ui/core/CircularProgress"
const useStyles = makeStyles(theme => ({
root: {
width: "100%",
},
progress: {
margin: theme.spacing(2),
},
}))
export default function MainComponentWrapper({ url, children }) {
const classes = useStyles()
const [data, setData] = React.useState()
React.useEffect(() => {
fetch(url, {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + window.localStorage.getItem("access_token"),
},
})
.then(resp => {
return resp.json()
})
.then(fetchedData => {
setData(fetchedData)
})
.catch(error => {
console.log(error)
window.localStorage.removeItem("access_token")
window.location.replace("/")
})
}, [url])
if (data === undefined) {
return (
<div className={classes.root}>
<CircularProgress className={classes.progress} />
</div>
)
}
return (
<div className={classes.root}>
{React.cloneElement(children, { data: data })}
</div>
)
}

Answer 1

Using #reach/router instead of react-router-dom solved the issue for the author. Gatsby library that was used to navigate the pages is built over #reach/router thus using react-router-dom caused conflicts. Code changes for #react/router
import { Router } from "#reach/router"
...
<Router>
<UserWrapper path="/users" />
<UserDetailsWrapper path="/users/:cn" />
</Router>
Read comments for details. Answer by author can be found below.
Discarded
All seems well could you please also share the code for your <MainComponentWrapper url={url}>. How are you calling the API there specifically in which lifecycle method?

Answer 2

So i fixed the problem, #m.sohail was right.
I had conflicts using react-router-dom, I need to use #reach/router, and made some code changes.
import React from "react"
import Layout from "../components/layout"
import User from "../components/users"
import MainComponentWrapper from "../components/mainComponentWrapper"
import UserDetails from "../components/userDetails"
import { Router } from "#reach/router"
const IndexPage = () => (
<div>
<Layout>
<Router>
<UserWrapper path="/users" />
<UserDetailsWrapper path="/users/:cn" />
</Router>
</Layout>
</div>
)