javascript - React-router:改变 url 但不改变显示的组件

Question

我的 react 路由器有问题。这是我的 /home 组件，登录后看到的第一个页面:

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

我有一个表，我需要根据网址的第二部分显示不同的数据(我使用自己的组件 ProtectedRoute 来检查身份验证，但行为与我们相同通常的 Route 组件)。

在 CustomNavbar 组件中，我有两个链接:

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

问题是，如果我单击导航栏中的链接，我可以看到 url 相应变化，但新组件没有加载，我仍然看到前一个组件。如果我点击浏览器的刷新按钮，则会加载正确的组件，但一旦发生这种情况，单击链接将不会更改任何内容，只会更改网址。

我该如何解决这个问题？

Answer 1

CustomNavbar 组件位于 Router 提供程序之外，这就是链接无法与 Route 组件通信的原因。

解决方案是在顶层渲染 Router 组件，并将 CustomNavbar 渲染为默认路由

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