history.push 不會在 React/Typescript 中重新渲染/刷新組件

Question

我正在導航到具有 ajax 請求的組件，但是僅在第一次導航到該組件時調用 ajax 調用。 所有其他路線看起來都不錯，但這是有問題的路線：

    const history = useHistory();

    onClick={() => history.push(`/details/${id}`}

路線：

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


const queryClient = new QueryClient()

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

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

          <Route component={NotFound} />
        </Switch>
    </BrowserRouter>
    </QueryClientProvider>
  )
}

export default Routing;

組件 2 代碼：

import React from 'react';
import { RouteComponentProps, useLocation } from "react-router-dom";
import { useQuery, useQueryClient} from 'react-query';


const Component2: React.FunctionComponent<RouteComponentProps<any>> = (props) => {

    const { state } = useLocation<stateType>();
    let id = props.match.params.id;

    const fetchData = async () => {
    const res = await fetch(`/detail/${id}`);
    return res.json();
    };

    const { data, status } = useQuery('chartInfo', fetchData, {
    staleTime: 5000,
    });

    return (
     {status === 'error' && (
                        <div className="mt-5">Error fetching data!</div>
                    )}
                    {status === 'loading' && (
                        <div className="mt-5">Loading data ...
                        </div>
                    )}
                    {status === 'success' && (
                        <div className="mt-5">
                      // data binded here
                        </div>
                    )}
    )

}

export default Component2;

Answer 1

現在更清楚可能導致問題的原因：看起來您正在嘗試從返回實際頁面的同一路徑中獲取 json。 換句話說，當您請求/detail/${id}時，您必須決定對服務器的期望：頁面或 json。 如果服務器已設置為返回 json，則必須為頁面分配不同的路徑。 但是我會將 json 的路徑更改為/api/detail/${id} ，因為通常人們會創建/api/*路由來請求 json 數據