Javascript 反应路由器：url中的更改，但未显示组件中的更改

我的路由器有问题。这是我的

/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相应地改变，但是新组件没有被加载，我仍然可以看到前一个组件。如果我点击浏览器的“刷新”按钮，则会加载正确的组件，但一旦发生这种情况，再次单击链接除了url外不会改变任何东西

---

如何解决此问题？

CustomNavbar组件位于路由器提供程序之外，这就是链路无法与路由组件通信的原因

解决方案是在顶层渲染路由器组件，并将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>
  )

返回(
{加载(
加载。。。
) : (
}
/>
}
/>
)}
)

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

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