React Router Redirect не работает в Private Route

Question

У меня есть этот частный компонент маршрута, который используется для визуализации компонента, только если пользователь вошел в систему, иначе он должен перенаправить на страницу входа.

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>

по какой-то причине перенаправление полностью игнорируется, и когда пользователь не вошел в систему, боковая панель отображается, но нисодержимое или страница входа в систему оказываются.

Я попытался вернуть только перенаправление в приватный маршрут, чтобы принудительно перенаправить и проверить, было ли это что-то с моей аутентификацией. Но перенаправление, кажется, не работает, независимо от того, где оно включено.

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);