React Router Changes URL, but view does't change, but if i press enter when the url is on the browser tab it does

Question

I have a page that renders a list of users, each user is a link that get's the user details. My list displays well, when i click a user the url changes but the view don't, but if i press enter again on that url the view changes to the details of that user, and after this when i am in the details page if i press the users list button in my layout the url changes but nothing happens again.

I have tried some solutions that i saw similar but no success

Users.js

import React from "react"
import { BrowserRouter as Router, Route, withRouter,Switch} 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 roleWrapper = props => {
  const url = "http://localhost:5000/user/" + props.match.params.cn
  return (
    <MainComponentWrapper url={url}>
      <UserDetails />
    </MainComponentWrapper>
  )
}

const IndexPage = () => (
 <Layout>
    <Router>
      <div>
         <Switch>
               <Route exact path="/users" component={User}>
                    <MainComponentWrapper url="http://localhost:5000/user">
                         <User />
                     </MainComponentWrapper>
                 </Route>
           </Switch>
                <Route path="/users/:cn"  component={roleWrapper} />
       </div>
    </Router>
 </Layout>

)

export default IndexPage

users.jsx

export default function User({ data })  {
  const classes = useStyles()

  return (

    <div className={classes.root} >

      <h1>Users</h1>
      <Table className={classes.table} size="small">
        <TableBody>
            {data.map((cn) => (
            <TableRow key={cn}>

              <TableCell align="left" >
              <Button >
                 <Link style={{ color: 'inherit', textDecoration: 'inherit'}} to={`/users/${cn}`} >{cn}</Link>
                 </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>

    </div>
  )
}

userDetails.jsx

export default function UserDetails({ data }) {


  return (
    <div>
      <h1>User Details</h1>
      <Table size="small">
        <TableHead>
          <TableRow>
            <TableCell align="left">cn</TableCell>
            <TableCell align="left">description</TableCell>
            <TableCell align="left">mail</TableCell>
            <TableCell align="left">ou</TableCell>
            <TableCell align="left">sn</TableCell>
            <TableCell align="left">uid</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow>
            {Object.entries(data).map(([key, value])=> (
              <TableCell align="left" key={key}> {value[0]}</TableCell>
            ))}
          </TableRow>
        </TableBody>
      </Table>

    </div>
   )
}

Answer 1

I think you need to wrap the component inside withRouter HOC, you can do this

const IndexPage = () => (
  <Layout>
  <Router>
    <div>
     <Switch>
           <Route exact path="/users" component={withRouter(User)}>
                <MainComponentWrapper url="http://localhost:5000/user">
                     <User />
                 </MainComponentWrapper>
             </Route>
       </Switch>
            <Route path="/users/:cn"  component={withRouter(roleWrapper)} />
    </div>
  </Router>
  </Layout> )

Also the component name should start with a Capital letter

Hope it helps

Answer 2

    <Router>
      <div>
         <Switch>
               <Route exact path="/users/:cn"  component={roleWrapper} />
               <Route exact path="/users" component={User}>
                    <MainComponentWrapper url="http://localhost:5000/user">
                         <User />
                     </MainComponentWrapper>
                 </Route>

           </Switch>

       </div>
    </Router>

Move both routes as children in the switch component, and add the exact prop in route component.