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?

Do you have the same behavior without loading condition in your /home component? — Oro
– Oro, Commented Apr 30, 2020 at 8:16

Shubham Khatri · Accepted Answer · 2020-04-30 08:17:52Z

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>
  )

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related