Question

如果通过使用props.history.push('/');到数据库的调用失败，我正在尝试重定向，但是我收到错误Property 'history' does not exist on type 'PropsInterface'来使事情进一步混乱，我已经从父级传递了props并在其中定义了它们PropsInterface如何扩展此界面以允许历史记录

import React, { useContext, useEffect } from 'react';
import { RouteProps } from 'react-router';
import { RouteComponentProps } from 'react-router-dom';
import { Global } from '../globalState';
import { Dispatch, SET_SHARED } from '../globalState';


interface PropsInterface {
  location: RouteProps['location'];
  children: RouteProps['children'];
}

const Layout: React.FC<PropsInterface> = (props: PropsInterface) => {
  const { global } = useContext(Global);
  const { dispatch } = useContext(Dispatch);

  useEffect(() => {
    const callApi = async (path: string) => {
...
        if (response.status === 200) {
          localStorage.setItem('jwtToken', content.jwtToken);
          dispatch({ type: SET_SHARED, value: content.shared });
        } else {
          localStorage.clear();
          props.history.push('/');
//                ^
//                 Property 'history' does not exist on type 'PropsInterface'.ts(2339)
        }
      }
    };

Answer 1

这里PropsInterface无权访问历史记录。因此，要获取历史记录，您需要使用随Routes（）一起提供的RouteComponentProps

按如下所示修改代码：

interface PropsInterface extends RouteComponentProps<any> {}

希望这会有所帮助。

React Typescript：类型“ PropsInterface”上不存在属性“ history”

1 个答案: