gpt4 book ai didi

reactjs - 在 Typescript 项目中实现 react-router PrivateRoute

转载 作者:搜寻专家 更新时间:2023-10-30 21:19:04 25 4
gpt4 key购买 nike

这是一个来自 react-router 的例子,说明如何为 protected 路由添加一个组件:

function PrivateRoute({ component: Component, ...rest }) {
return (
<Route
{...rest}
render={props =>
fakeAuth.isAuthenticated ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/login",
state: { from: props.location }
}}
/>
)
}
/>
);
}

https://reacttraining.com/react-router/web/example/auth-workflow

我尝试在我的 Typescript 项目中实现此功能,以上面的示例为灵感。

组件/路由

import PrivateRoute from '../../connectors/PrivateRoute';
<PrivateRoute path="/codes" component={SomePage} />

连接器/PrivateRoute

import { connect } from 'react-redux';
import { AppState } from 'app-types';
import PrivateRouteComponent from '../../components/PrivateRoute';

const mapStateToProps = (state: AppState) => {
const isSignedIn = state.user.isSignedIn;

return {
isSignedIn
};
};

const PrivateRoute = connect(
mapStateToProps,
null
)(PrivateRouteComponent);

export default PrivateRoute;

组件/PrivateRoute

import * as React from 'react';
import {
Route,
Redirect,
} from 'react-router-dom';

interface PrivateRouteProps {
// tslint:disable-next-line:no-any
component: any;
isSignedIn: boolean;
// tslint:disable-next-line:no-any
location: any;
}

const PrivateRoute = (props: PrivateRouteProps) => {
const { component: Component, isSignedIn, location, ...rest } = props;

return (
<Route
{...rest}
render={(routeProps) =>
isSignedIn ? (
<Component {...routeProps} />
) : (
<Redirect
to={{
pathname: '/signin',
state: { from: location }
}}
/>
)
}
/>
);
};

export default PrivateRoute;

错误

(105,18): Type '{ path: string; component: ConnectedComponentClass<typeof SomePage, Pick<SomePageProps, never>>; }' is not assignable to type 'Readonly<Pick<PrivateRouteProps, "location" | "component">>'.
Property 'location' is missing in type '{ path: string; component: ConnectedComponentClass<typeof SomePage, Pick<SomePageProps, never>>; }'.

最佳答案

错误发生是因为 PrivateRouteProps 有一个必需的属性 location 当你在 components/Routes 中使用 PrivateRoute 时没有提供.tsx。我假设这个位置应该来自路由器自动传递给路由的 render 函数的 routeProps,就像它在原始示例中所做的那样。修复此问题后,会暴露另一个错误:components/Routes.tsx 正在传递未在 PrivateRouteProps 中声明的 paths 属性。由于 PrivateRoute 将它不知道的任何 Prop 传递给 RoutePrivateRouteProps 应该从 扩展 RouteProps >react-router 以便 PrivateRoute 接受 Route 接受的所有 Prop 。

这是两个修复后的 components/PrivateRoute.tsx:

import * as React from 'react';
import {
Route,
Redirect,
RouteProps,
} from 'react-router-dom';

interface PrivateRouteProps extends RouteProps {
// tslint:disable-next-line:no-any
component: any;
isSignedIn: boolean;
}

const PrivateRoute = (props: PrivateRouteProps) => {
const { component: Component, isSignedIn, ...rest } = props;

return (
<Route
{...rest}
render={(routeProps) =>
isSignedIn ? (
<Component {...routeProps} />
) : (
<Redirect
to={{
pathname: '/signin',
state: { from: routeProps.location }
}}
/>
)
}
/>
);
};

export default PrivateRoute;

关于reactjs - 在 Typescript 项目中实现 react-router PrivateRoute,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53104165/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com