React 使用 RouteComponentProps - 类型“{}”缺少类型“Readonly<RouteComponentProps<{} 中的以下属性
React Use RouteComponentProps - Type '{}' is missing the following properties from type 'Readonly<RouteComponentProps<{}
我正在使用带有 Typescript 的 React 并且需要使用历史记录,因为我需要具有 RouteComponentProps 接口
export default class Routes extends Component<RouteComponentProps, any> {
render() {
return (
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/login" component={Login} />
<ProtectedRoute exact path="/admin" component={Admin} />
</Switch>
</div>
);
}}
当我将 props 接口用作 RouteComponentProps 时,它在下面的代码处出现错误。
class App extends Component {
render() {
return (
<Provider>
<React.Fragment>
<Navbar />
<Routes />
</React.Fragment>
</Provider>
);
}
}
当我尝试使用我的路由组件时出现错误。错误说
类型“{}”缺少类型 'Readonly>' 中的以下属性:历史、位置、匹配 TS2739
请帮助解决这个问题
你必须将这些道具传递给你的组件。
当然你不想在 App 组件中传递它。只需用来自 react-router lib 的 hoc 包装它)
高阶组件"withRouter"将完成这项工作
import { RouteComponentProps, withRouter } from 'react-router';
class Routes extends React.Component<RouteComponentProps, any> {
public render() {
return (
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/login" component={Login} />
<ProtectedRoute exact path="/admin" component={Admin} />
</Switch>
</div>
);
}
}
export default withRouter(Routes);
我正在使用带有 Typescript 的 React 并且需要使用历史记录,因为我需要具有 RouteComponentProps 接口
export default class Routes extends Component<RouteComponentProps, any> {
render() {
return (
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/login" component={Login} />
<ProtectedRoute exact path="/admin" component={Admin} />
</Switch>
</div>
);
}}
当我将 props 接口用作 RouteComponentProps 时,它在下面的代码处出现错误。
class App extends Component {
render() {
return (
<Provider>
<React.Fragment>
<Navbar />
<Routes />
</React.Fragment>
</Provider>
);
}
}
当我尝试使用我的路由组件时出现错误。错误说
类型“{}”缺少类型 'Readonly>' 中的以下属性:历史、位置、匹配 TS2739
请帮助解决这个问题
你必须将这些道具传递给你的组件。
当然你不想在 App 组件中传递它。只需用来自 react-router lib 的 hoc 包装它)
高阶组件"withRouter"将完成这项工作
import { RouteComponentProps, withRouter } from 'react-router';
class Routes extends React.Component<RouteComponentProps, any> {
public render() {
return (
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/login" component={Login} />
<ProtectedRoute exact path="/admin" component={Admin} />
</Switch>
</div>
);
}
}
export default withRouter(Routes);