组件不呈现使用时创建的最新数据<Link>

Question

React 中直接写 url 和使用下面的链接有什么区别。

这是一些代码：

<Link onClick={() => history.push('/notification')}>My alerts</Link>

这是当用户单击链接我的警报时重定向到的组件。

const { data: employer, loading, error, refetch } = useQuery<Account>(AccountQuery)
  const [deleteSearchSubscription] = useMutation(DeleteSearchSubscriptionMutator, {
    onError: error => console.error(error),
    onCompleted: () => refetch(),
  })

更新：

<Router>
        <Header />
        <Page>
          <Switch>
            <Route path="/notification">
              <EmailNotifications />
            </Route>
            <Route path="/error-page">
              <PageNotFound />
            </Route>
            <Route path="/not-found">
              <ErrorPage />
            </Route>
            <Route path="/login">
              <Login />
            </Route>
          </Switch>
        </Page>
        <Footer />
      </Router>

知道为什么当直接写入 url 时，我的组件在单击链接时使用后端的最新数据呈现，但它没有从后端获取最新数据，为什么会出现这种行为？

Answer 1

我认为我们需要查看更多您的代码，但您是否正在尝试刷新？ 因为那个链接看起来不错，即使我认为这是更好的形式

<Link to="/notification">My alerts</Link>

但是，如果您正在尝试重新加载并且您已经在yoursite.com/notification 上，它将无法正常工作

但我无法从您提供的代码中判断是否是这种情况

如果是，您需要重定向到其他路径而不是返回到 /notification

更新：

你用什么路由器？

React-router 的基本路由组件如下所示

<Route path="/notification" component={EmailNotifications} /> 

没有孩子

请参阅： https : //reacttraining.com/react-router/web/api/Route/component

Answer 2

链接有道具to . 所以你不需要onClick

<Link to='/notification'>My alerts</Link>

Answer 3

添加：

  useEffect(() => {
    refetch()
  })

修复了问题！