如何为 useHitory() 覆盖非泛型类型，例如 @types/History? [英] How to override non-generic types such as @types/History for useHitory()?

问题描述

我的目标是覆盖历史"类型，因此我可以使用传递 eventKey 道具为 (eventKey) =>history.push(eventKey)，我无法从 useHistory() 覆盖 History 类型，它说类型历史不是通用的".我目前的解决方案是 const history: any = useHistory() 但我相信它违背了类型的目的.

import { RouteConfigProps } from "app/routes/config";从app/routes/RenderRoutes"导入{RenderRoutes}；从反应"导入反应；import { Nav, Navbar } from react-bootstrap";import { Link, useHistory } from react-router-dom";const 主页:React.FC<{路由:RouteConfigProps[]}>= ({路线}) =>{console.log("家庭路线:"，路线)const 历史:历史<>= useHistory();返回 (<div><Navbar bg="light";展开=lg"><Navbar.Brand>嗨！</Navbar.Brand><Navbar.Toggle aria-controls="basic-navbar-nav";/><Navbar.Collapse id="basic-navbar-nav"><Nav className="mr-auto";onSelect={(eventKey) =>history.push(eventKey)><Nav.Link eventKey="/home">Home</Nav.Link><Nav.Link eventKey="/about">关于</Nav.Link><Nav.Link eventKey="/contact">Contact</Nav.Link><Nav.Link eventKey="/motivational-letter">Motivational Letter</Nav.Link><Nav.Link eventKey="/it-core-values">IT核心价值</Nav.Link></导航></Navbar.Collapse></导航栏><RenderRoutes routes={routes}/>

);};导出默认首页；

解决方案

正如我在评论中所解释的，useHistory() 钩子是 通用的.我认为您收到错误是因为接口 History 在多个地方有多个声明，有些是通用的，有些则不是.假设您指的是内置浏览器 History 对象而不是路由器历史记录.所以将泛型应用于钩子调用比返回的对象更好.

这样做

const history = useHistory();//历史的类型为 History

代替这个

const history: History= useHistory();//给出错误历史不是通用的

但是打字稿问题是您传递给history.push() 的内容.传递的参数必须是 To 可以是 string 或特定对象 PartialPath 并且不依赖于 History 的泛型.

您作为 onSelect 传递给 Nav 组件的参数需要是 SelectCallback 类型，定义为:

type SelectCallback = (eventKey: string | null, e: React.SyntheticEvent) =>空白

你看到不匹配了吗?eventKey 可以是 string 或 null，但 history.push() 只能接受一个 string 而不是 null.所以你需要在调用 history.push(eventKey) 之前让这个条件过滤掉 null.

const onSelect = (eventKey: string | null) =>{如果(事件键！== 空){history.push(eventKey);}}

这将解决您的打字稿错误.

My goal is to override 'History' type, so I can use pass eventKey props for (eventKey) => history.push(eventKey), I could not override History type from useHistory(), it said "Type History is not generic". The current solution I did is const history: any = useHistory() but I believe it defeat the purpose of types.

import { RouteConfigProps } from "app/routes/config";
import { RenderRoutes } from "app/routes/RenderRoutes";
import React from "react";
import { Nav, Navbar } from "react-bootstrap";
import { Link, useHistory } from "react-router-dom";

const Home: React.FC<{routes: RouteConfigProps[]}> = ({ routes }) => {
  console.log("Home routes: ", routes)
  const history: History<> = useHistory();
  return (
    <div>
      <Navbar bg="light" expand="lg">
        <Navbar.Brand>Hi!</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto" onSelect={(eventKey) => history.push(eventKey)>
            <Nav.Link eventKey="/home">Home</Nav.Link>
            <Nav.Link eventKey="/about">About</Nav.Link>
            <Nav.Link eventKey="/contact">Contact</Nav.Link>
            <Nav.Link eventKey="/motivational-letter">Motivational Letter</Nav.Link>
            <Nav.Link eventKey="/it-core-values">IT Core Values</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      <RenderRoutes routes={routes} />
    </div>
  );
};

export default Home;

解决方案

As I explained in my comment, the useHistory() hook is generic. I think you're getting the error because there are multiple declarations for the interface History in multiple places, some generic and some not. It's assuming you mean the built-in browser History object instead of the router history. So it's better to apply the generic to the hook call than the returned object.

do this

const history = useHistory<MyHistoryType>(); // history has type History<MyHistoryType>

instead of this

const history: History<MyHistoryType> = useHistory(); // gives error History is not generic

But the typescript problem is what you are passing to history.push(). The passed argument must be a of type To which is either a string or a specific object PartialPath and does not depend on the generic of History.

The param which you pass as onSelect to the Nav component needs to be of type SelectCallback which is defined as:

type SelectCallback = (eventKey: string | null, e: React.SyntheticEvent<unknown>) => void

Do you see the mismatch yet? eventKey can be either string or null, but history.push() can only accept to accept a string and not null. So you need to make this conditional to filter out null before calling history.push(eventKey).

const onSelect = (eventKey: string | null) => {
    if (eventKey !== null) { 
        history.push(eventKey); 
    }
}

That will solve your typescript errors.

这篇关于如何为 useHitory() 覆盖非泛型类型，例如 @types/History?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！