React TypeScript：路线位置和子属性的正确类型

Question

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

这是使用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 };

在布局组件内部，我有一个用于位置和子项的界面，但因为我不知道这些的正确类型，所以我最终使用了任何一个，然后我的 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

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

在您的项目中安装它之后，您应该能够使用如下界面消除 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 不会让您像以前那样渲染它。

这是一个 link 的工作示例：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>;
};

React TypeScript：路线位置和子属性的正确类型

React TypeScript: Correct types for Route location and children properties

typescript

reactjs

react-router-v4