时间戳

首页 > 解决方案 > history.push 不会在 React/Typescript 中重新渲染/刷新组件

javascript - history.push 不会在 React/Typescript 中重新渲染/刷新组件

问题描述

我正在导航到具有 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;

标签： javascriptreactjs

解决方案

现在更清楚可能导致问题的原因：看起来您正试图从返回实际页面的同一路径获取 json。换句话说，当您请求时，您必须确定您对服务器/detail/${id}的期望：页面或 json。如果服务器已经设置为返回 json，那么您必须为页面分配不同的路径。但我会将 json 的路径改为类似的路径/api/detail/${id}，因为通常人们会/api/*为请求 json 数据创建路由

推荐阅读