javascript - 为什么即使我已登录,我也无法访问仪表板路线?
问题描述
我在我的应用程序中使用私有路由来访问仪表板。如果我没有登录,它会正常工作并将我重定向到登录页面。但即使我已登录,它也无法访问仪表板。这是我的代码。
应用程序.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './containers/Home';
import Login from './containers/Login';
import Dashboard from './containers/Dashboard';
import PrivateRoute from './components/PrivateRoute';
import { Provider } from 'react-redux';
import store from './store';
const App = () => (
<Provider store={store}>
<Router>
<Layout>
<Switch>
<Route exact path='/' component={Home} />
<PrivateRoute exact path='/dashboard' component={Dashboard} />
<Route exact path='/login' component={Login} />
</Switch>
</Layout>
</Router>
</Provider>
);
export default App;
PrivateRoute.js
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
const PrivateRoute = ({ component: Component, auth, ...rest }) => (
<Route
{...rest}
render={(props) => {
if (!auth.isAuthenticated) {
return <Redirect to="/login" />;
} else {
return <Component {...props} />;
}
}}
/>
);
const mapStateToProps = (state) => ({
auth: state.auth,
});
export default connect(mapStateToProps)(PrivateRoute);
如果我在 react redux 工具上登录,我的状态是这些
我注意到即使 isAuthanticated 在登录后变为真,但privateRoutes.js 的其他部分从未调用
解决方案
推荐阅读
- php - Woocommerce 自定义感谢页面
- javascript - 窗口焦点在 Javascript 中不起作用
- android - 在 RecyclerView 上获取空引用
- reactjs - 钩子没有在反应中呈现
- python - TypeError: unhashable type: 'list',我需要将 xpath 中的数据(作为列表)拆分为两个
- java - 是否可以使用 brew 或 sdkman 安装 jre6?
- ios - 如何增加活动指示器的大小
- react-router - react-router 嵌套路由可以在不重新渲染父组件的情况下渲染组件吗?
- css - 单词结束后的 CSS 省略号
- python - 为什么这种执行 python 的方式不起作用