[英]React TypeScript: Correct types for Route location and children properties
I have a router that passes props of location and children, but I don't know what the correct types are for these props.我有一个路由器可以传递位置和子项的道具,但我不知道这些道具的正确类型是什么。
This is the router using react-router-dom...这是使用 react-router-dom 的路由器...
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 };
and inside layout component, I have an interface for the location and children, but because I don't know the correct type for these I end up using any, my linter then throws a fit.在布局组件内部,我有一个用于位置和子项的界面,但是因为我不知道这些的正确类型,所以我最终使用了任何类型,然后我的 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 };
The error I get is Type declaration of 'any' loses type-safety.我得到的错误是“任何”的类型声明失去了类型安全性。 Consider replacing it with a more precise type.
考虑用更精确的类型替换它。 (no-any)tslint(1)
(无)tslint(1)
Could I get location from import import { useLocation } from 'react-router-dom';
我可以从 import
import { useLocation } from 'react-router-dom';
获取位置import { useLocation } from 'react-router-dom';
The interface for Route
that you're looking for can be found in the @types/react-router
definition.您正在寻找的
Route
接口可以在@types/react-router
定义中找到。
After installing that in your project, you should be able to silence that TS error with an interface like this:在您的项目中安装它后,您应该能够使用如下界面消除该 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>;
};
Keep in mind, location
is an object, so React isn't going to let you render that as you were previously.请记住,
location
是一个对象,因此 React 不会让您像以前那样渲染它。
Here's a link to a working sample: https://codesandbox.io/s/zealous-snyder-yw9dg这是工作示例的链接: https : //codesandbox.io/s/zealous-snyder-yw9dg
Another option is to use a Partial interface, but that will make all the ILayoutProps
optional:另一种选择是使用Partial接口,但这将使所有
ILayoutProps
可选:
interface ILayoutProps extends Partial<RouteProps> {}
You can also find the interface for these types using the RouteComponentProps
exposed by react-router-dom
.您还可以使用
react-router-dom
公开的RouteComponentProps
找到这些类型的接口。 Try:尝试:
import { RouteComponentProps } from "react-router-dom";
and map that to your Component like so:并将其映射到您的组件,如下所示:
// Layout.tsx
import { RouteComponentProps } from "react-router-dom";
const Layout: React.FC<RouteComponentProps> = (props) => {
return <div>{props.children}</div>;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.