React Router 道具：什么是正确的类型？

Question

我创建了一个路由器自定义组件来进行重定向，以防某些参数不存在：

const StateParamRoute = (props: any) => {
  ...
  return stateParam ? <Route {...props} /> : <Redirect to="/error" />;
};

然后，我将其用作：

<BrowserRouter>
  <Switch>
    <StateParamRoute path="/" exact component={TestScreen} />
  </Switch>
</BrowserRouter>

但我在控制台中收到一条警告：

Line 48:23:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

我知道我可以忽略这个，或者禁用对 eslint 配置的检查，但我想解决它。

我试过：

type CustomRouterProps = {
  path: string,
  exact: boolean,
  component: React.ReactNode
}

const StateParamRoute = (props: CustomRouterProps) => {
...
}

但是不行...

Answer 1

到目前为止我发现如果我这样做：

type CustomRouterProps = {
  path: string;
  exact: boolean;
  component: ComponentType<ReactNode>;
};

const StateParamRoute = (props: CustomRouterProps) => {
...
}

警告消失了，但我不确定这是不是最好的解决方案。

Answer 2

为什么不使用 @types/react-router-dom 中的类型并像这样导入它：

import { RouteProps } from 'react-router-dom';

const StateParamRoute = (props: RouteProps) => {
...
}

React Router 道具：什么是正确的类型？

React Router props: what is the correct type?

typescript

reactjs

react-router-dom