Javascript 反应路由器不'；t访问保护路由

在我的typescript react项目中，我创建了一个受保护的路由，以在呈现组件之前检查身份验证

export const ProtectedRoute: React.FC<ProtectedRouteProps> = props =>{

    const currentLocation = useLocation();

    let redirectpath = props.redirectPathOnAuthentication;
    console.log(redirectpath)
    console.log('in protected route')
    if(!props.isAuthenticated){
        props.setRedirectPathOnAuthentication(currentLocation.pathname);
        redirectpath = props.authenticationPath;
    }

        if(redirectpath !== currentLocation.pathname){
            const renderComponent = () => <Redirect to={{pathname: redirectpath}} />;
            return <Route {...props} component={renderComponent} render={undefined} />
        }else{
            return <Route {...props} />
        }
    }

---

对于所需的实现，您可以尝试这种方法，这种方法效果很好：

export const PrivateRoute = ({component: Component, isAuthenticated, ...rest}) => (
    <Route {...rest} 
        render={
            props => (
                isAuthenticated ? (
                    <Component {...props} />
                ):
                (
                    <Redirect to={{ pathname: '/login', state: { from: props.location }}}/>
                )
            )
        }
    />
)

PrivateRoute.propTypes = {
    isAuthenticated: PropTypes.bool.isRequired
}

const mapStateToProps = state => ({
  isAuthenticated: state.auth.isAuthenticated
});


export default connect(mapStateToProps)(PrivateRoute)

在

应用程序中

：

let AppRedirect = ({ loadingApp }) => {
  return loadingApp ? <Loading /> : <DefaultRoutes />;
};

const mapState = (state) => ({
  loadingApp: state.app.loadingApp,
});

AppRedirect = connect(mapState)(AppRedirect);

export class App extends React.Component {

  render() {
    return (
      <Provider store={store}>
          <AppRedirect />
      </Provider>
    );
  }
}

export default App;

let AppRedirect=（{loadingApp}）=>{
返回加载PP？：；
};
常量映射状态=（状态）=>({
loadingApp:state.app.loadingApp，
});
AppRedirect=连接（映射状态）（AppRedirect）；
导出类应用程序扩展React.Component{
render（）{
返回(
);
}
}
导出默认应用程序；

当用户成功登录时，发送一个操作以更改状态：loadingApp:true->loadingApp:false

<Switch>
     <Route path="/login" component={Login} />
     <Route path="/signup" component={Signup} />
     <PrivateRoute component={Home} />
     <Route path="*" component={NotFound404} />
</Switch>

let AppRedirect = ({ loadingApp }) => {
  return loadingApp ? <Loading /> : <DefaultRoutes />;
};

const mapState = (state) => ({
  loadingApp: state.app.loadingApp,
});

AppRedirect = connect(mapState)(AppRedirect);

export class App extends React.Component {

  render() {
    return (
      <Provider store={store}>
          <AppRedirect />
      </Provider>
    );
  }
}

export default App;