reactjs - React Router Redirect 在专用路由中不起作用

Question

我有这个私有(private)路由组件，用于仅在用户登录时呈现组件，否则它应该重定向到登录页面。

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

export default withRouter(PrivateRoute);

这是我的主要应用:

            <BrowserRouter>
                <div className="wrapper">
                    <Switch>
                        <Route path="/login" component={LoginPage} />
                        <> 
                        <div className="dashboard">
                            <SideBar />
                            {permittedEvents &&
                                <div className="content-area">
                                    <PrivateRoute exact path="/" component={Dashboard} />
                                    <PrivateRoute exact path="/calendar" component={Calendar} />
                                </div>
                            }
                        </div>
                        </>
                    </Switch>
                </div>
            </BrowserRouter>

由于某种原因，重定向被完全忽略，当用户未登录时，将呈现边栏，但不会呈现内容或登录页面。

我试过只返回 te Private 路由中的重定向以强制 te 重定向并检查它是否与我的身份验证有关。但是重定向似乎无论在何处都不起作用。

Answer 1

你不需要路线

class PrivateRoute extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { component: Component, ...rest } = this.props;

        const redirectPath = (<Redirect to={{
            pathname: "/login",
            state: {
                from: this.props.location.pathname
            }
        }}/>);

   if (!ok) {
                return redirectPath;
            }
        return <Component {...this.props} />;
    }
};

export default  withRouter(PrivateRoute);