React-router：url更改但显示的组件没有更改答案

【问题标题】：React-router: change in url but not in components displayedReact-router：url更改但显示的组件没有更改
【发布时间】：2020-04-30 08:10:28
【问题描述】：

我的 react-router 有问题。这是我的/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>
    </>
  )

我有一个表格，我需要根据 url 的第二部分显示不同的数据（我使用我自己的组件 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 相应地发生变化，但是没有加载新组件，我仍然看到前一个。如果我点击浏览器的刷新按钮，则会加载正确的组件，但一旦发生这种情况，再次点击链接不会改变任何东西，只会改变 url。

我该如何解决这个问题？

【问题讨论】：

在 /home 组件中没有加载条件的情况下，您是否有相同的行为？

标签： javascript reactjs react-router

【解决方案1】：

CustomNavbar 组件位于路由器提供程序之外，这就是链接无法与 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>
  )

【讨论】：