React TypeScript:路由位置和子属性的正确类型

Question

我有一个路由器，可以传递位置和子道具，但我不知道这些道具的正确类型是什么。

这是使用反应路由器的路由器...

import React, { useReducer } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { globalContext, setGlobalContext } from './components/context';
import { Layout } from './components/layout';
import { defaultState, globalReducer } from './components/reducer';
import { Home } from './routes/home';
import { NotFound } from './routes/notFound';
const Router: React.FC = () => {
const [global, setGlobal] = useReducer(globalReducer, defaultState);
return (
<setGlobalContext.Provider value={{ setGlobal }}>
<globalContext.Provider value={{ global }}>
<BrowserRouter>
<Route
render={({ location }) => (
<Layout location={location}>
<Switch location={location}>
<Route exact path='/' component={Home} />
<Route component={NotFound} />
</Switch>
</Layout>
)}
/>
</BrowserRouter>
</globalContext.Provider>
</setGlobalContext.Provider>
);
};
export { Router };

在布局组件中，我有一个用于位置和子项的界面，但由于我不知道这些的正确类型，我最终使用了任何类型，然后我的 linter 抛出了一个适合。

import React from 'react';
interface PropsInterface {
children: any;
location: any;
}
const Layout: React.FC<PropsInterface> = (props: PropsInterface) => {
return (
<div>
<p>{props.location}</p>
<p>{props.children}</p>
</div>
);
};
export { Layout };

我得到的错误是"any"的类型声明丢失了类型安全。考虑将其替换为更精确的类型。(无任何(tslint(1(

我可以从导入import { useLocation } from 'react-router-dom';获取位置吗

Answer 1

您可以在@types/react-router定义中找到您正在寻找的Route接口。

在您的项目中安装它后，您应该能够使用如下接口使该 TS 错误静音：

// Layout.tsx
import { RouteProps } from "react-router";
interface ILayoutProps {
location: RouteProps["location"];
children: RouteProps["children"];
}
const Layout: React.FC<ILayoutProps> = (props: ILayoutProps) => {
return <div>{props.children}</div>;
};

请记住，location是一个对象，所以 React 不会让你像以前那样渲染它。

下面是一个工作示例的链接：https://codesandbox.io/s/zealous-snyder-yw9dg

---

另一种选择是使用 Partial 接口，但这将使所有ILayoutProps都是可选的：

interface ILayoutProps extends Partial<RouteProps> {}

Answer 2

您还可以使用react-router-dom公开的RouteComponentProps找到这些类型的接口。尝试：

import { RouteComponentProps } from "react-router-dom";

并将其映射到您的组件，如下所示：

// Layout.tsx
import { RouteComponentProps } from "react-router-dom";
const Layout: React.FC<RouteComponentProps> = (props) => {
return <div>{props.children}</div>;
};