React-query /React-路由器dom问题

Question

如果我使用react-query和react-router，我可以看到导航时发生的网络请求，但是新数据不会反映在视图/页面中？我做错了什么吗？我正在做延迟加载：

App.tsx

import React, { Suspense } from 'react';
import Loader from '../loader/Loader';

const App: React.FunctionComponent = () => {

  const Routing = React.lazy(() => import('../routing/Routing'));

  return (
    <>
      <Suspense fallback={<Loader />}>
        <DataProvider>
          <Routing />
        </DataProvider>
      </Suspense>
    </>
  );
}

export default App; 

路由器组件：

import React from 'react';
import { BrowserRouter, Route, Switch} from 'react-router-dom';
import Header from '../header/Header';
import Component1 from './Component1';
import Compontent2 from './Component2';
import { QueryClient, QueryClientProvider } from 'react-query';
import { RouteComponentProps } from "react-router-dom";

const queryClient = new QueryClient()

const Routing: React.FunctionComponent = () => {

  return (
    <QueryClientProvider client={queryClient}>
    <BrowserRouter>
      <Header />
      <div className="App">
        <Switch>
          <Route exact path="/" component={Component1} />
          <Route path="/details/:id" render={(props: RouteComponentProps<any>) => <Component2 {...props}/>} />
        </Switch>
      </div>
    </BrowserRouter>
    </QueryClientProvider>
  )
}

export default Routing;

组件1

const fetchAll = async () => {
        const res = await fetch('https:xxxxxx/xxxxx');
        return res.json();
    };

    const { data: result, status } = useQuery('info', fetchAll, {
        staleTime: 0,
    });

组件2使用了同样的方法，react-query的东西不在任何东西的useEffect中？

如何让视图在导航时重新呈现并显示新数据。

Answer 1

尝试将对React.lazy的调用移到回退组件之外？

 const Routing = React.lazy(() => import('../routing/Routing'));

const App: React.FunctionComponent = () => {
 return (
    <>
      <Suspense fallback={<Loader />}>
        <DataProvider>
          <Routing />
        </DataProvider>
      </Suspense>
    </>
  );
}

export default App; 

这就是他们在官方React文档中使用它的方式：

https://reactjs.org/docs/code-splitting.html