Question

我对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检查身份验证，但是行为与通常的{ {1}}组件。

在Route组件中，我有两个链接：

CustomNavbar

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

我该如何解决？

Answer 1

CustomNavbar组件不在路由器提供程序之内，这就是为什么Links无法与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>
  )

React-router：更改网址，但不更改显示的组件

1 个答案: