Я создаю пример страницы входа, чтобы улучшить свои навыки реагирования.Тем не менее, я не мог понять проблему с React Router.Я успешно прошел проверку подлинности, и приложение переносит меня на защищенную страницу, но когда я обновляю страницу на этой защищенной странице, она показывает пустую страницу.
То же самое происходит, когда я пытаюсь написать защищенный URL-адрес вручную.(пустой экран)
Вот этот PrivateRoute
export const PrivateRoute = ({
isAuthenticated,
component: Component,
...rest
}) => (
<Route {...rest} render={(props) => {
if (isAuthenticated) {
return <Component {...props} />
}
else {
return <Redirect to="/" />
}
}} />
);
const mapStateToProps = state => {
console.log(state.userReducer.token);
return {
isAuthenticated: !!state.userReducer.token
}
};
export default connect(mapStateToProps)(PrivateRoute);
Вот этот PublicRoute
export const PublicRoute = ({ isAuthenticated, component: Component, ...rest}) => (
<Route {...rest} render={(props) => {
if (isAuthenticated) {
return <Redirect to="/logged" />
}
else {
return <Component {...props} />
}
}} />
);
const mapStateToProps = state => ({
isAuthenticated: !!state.userReducer.token
});
export default connect(mapStateToProps)(PublicRoute);
AppRouter
const AppRouter = () => {
return (
<BrowserRouter>
<div>
<PublicRoute path="/" component={LoginForm} exact />
<PrivateRoute path="/logged" component={LoggedPage} />
</div>
</BrowserRouter>
);
}
export default AppRouter;
И, наконец, последнийтот, который я создаю AppRouter
const jsx = (
<Provider store={createStore(reducers)}>
<AppRouter />
</Provider>
)
ReactDOM.render(jsx, document.getElementById('root'));
Я ценю любые предложения, спасибо заранее