React-router: change in url but not in components displayed

Question

I have a problem with react-router. This is my /home component, the first page you see after logging in:

  return(
    <>
      <CustomNavbar />
      <Container fluid>
        { loading ? (
          <div>Loading...</div>
        ) : (
          <Router>
            <ProtectedRoute
              path='/home/mem'
              render={(props) => <MResult
                {...props}
                data={data}
                users={users} />
              }
            />

            <ProtectedRoute
              path='/home/reading'
              render={(props) => <RResult
                {...props}
                data={readingData}
                users={users} />
              }
            />
          </Router>
        )}
      </Container>
    </>
  )

I have a table and I need to display different data based on the second part of the url (I'm using my own component ProtectedRoute to check for authentication, but the behaviour is the same we the usual Route component).

In the CustomNavbar component I have two links:

  return(
    <Navbar bg="primary" variant="dark">
      <Navbar.Brand className='cursor-default'>
        <span style={{marginLeft: "10px"}}></span>
      </Navbar.Brand>
      <Navbar.Toggle />
      <Navbar.Collapse>
        { props.authenticated && (
          <>
            <Button>
              <Link to="/home/reading">Reading</Link>
            </Button>
            <Button>
              <Link to="/home/mem">MemResult</Link>
            </Button>
          </>
        )}
      </Navbar.Collapse>
      <Navbar.Collapse className='justify-content-end'>
        { props.authenticated && (
          <Button onClick={logout}>logout</Button>
        )}
      </Navbar.Collapse>
    </Navbar>
  )

The problem is that if I click on the links in the navbar I can see the url changing accordingly, but the new component is not being loaded, I still see the previous one. If I hit the browser's refresh button, then the correct component is loaded, but once that happened, again, clicking on the links won't change a thing but the url.

How can I fix this?

Answer 1

The CustomNavbar component is outside of the Router provider which is why Links aren't able to communicate to the Route component.

The solution is to render Router component at the top level and render CustomNavbar as a default route

return(
    <Router>
      <Route component={CustomNavbar} />
      <Container fluid>
        { loading ? (
          <div>Loading...</div>
        ) : (
            <ProtectedRoute
              path='/home/mem'
              render={(props) => <MResult
                {...props}
                data={data}
                users={users} />
              }
            />

            <ProtectedRoute
              path='/home/reading'
              render={(props) => <RResult
                {...props}
                data={readingData}
                users={users} />
              }
            />
          </Router>
        )}
      </Container>
    </Router>
  )