Question

我尝试使用typescript在我的应用中编写一些路由，但是我遇到了重定向组件的问题。这是我的代码：

export interface Props {

}

const Routes = (props:Props) => (
<Switch>
    <Route path="/login" component={Login}/>
    <Route path="/" component={Home}/>

    <Redirect   to="/login" component={Login}/>

</Switch>
);

export default Routes;

然后，编译器抛出以下错误：

（20,33）：错误TS2339：属性＆＃39;组件＆＃39;类型＆＃39; IntrinsicAttributes＆amp; IntrinsicClassAttributes＆amp; Readonly＆lt; {children？：ReactNode; }＆GT; ＆安培; ...＆＃39;

你能告诉我问题出在哪里，或者当url与我的路由器不相比时如何进行重定向？

Answer 1

要查看您可以在Redirect组件上设置哪些属性，您必须查看来自@ types / react-router

的RedirectProps的类型定义

...
export interface RedirectProps {
  to: H.LocationDescriptor;
  push?: boolean;
  from?: string;
  path?: string;
  exact?: boolean;
  strict?: boolean;
}
...

此接口没有为component定义的属性，因此ts编译器将为component={Login}抛出错误。

对Redirect提供另一个组件也不是很有用，因为它只会重定向到新路由并且没有显示值。

使用Typescript，Redirect对路由器4进行反应

1 个答案: