組件不呈現使用時創建的最新數據<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()
  })

修復了問題！