TypeError:无法读取未定义的属性“历史”
Posted
技术标签:
【中文标题】TypeError:无法读取未定义的属性“历史”【英文标题】:TypeError: Cannot read property 'history' of undefined 【发布时间】:2018-02-04 00:42:18 【问题描述】:当 /logout 路由被命中时,我正在尝试将用户重定向到登录页面。身份验证正在运行(jwt 令牌已删除,但应用无法重定向到 /login。
如果我这样做 / 应用程序也会崩溃。
在我使用 react-router-dom 包中的 withRouter 的登录路由上,我可以访问 this.props.history.push('/redirect_to_a_new_path')
,但是当我尝试使用 withRouter
方法包装 App 组件时,它也会崩溃。
请帮忙!
这里是github repo:
App.js
import React, Component from "react";
import
BrowserRouter as Router,
Route,
Switch,
withRouter
from "react-router-dom";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import lightBaseTheme from "material-ui/styles/baseThemes/lightBaseTheme";
import getMuiTheme from "material-ui/styles/getMuiTheme";
import injectTapEventPlugin from "react-tap-event-plugin";
// Components
import Navbar from "./components/Navbar";
import HomePage from "./components/HomePage";
import SpotMap from "./components/SpotMap";
import SignUpPage from "./components/containers/SignUpPage";
import LoginPage from "./components/containers/LoginPage";
import DashboardPage from "./components/containers/DashBoardPage";
import NotFound from "./components/NoteFound";
import Auth from "./modules/Auth";
import "./styles/App.css";
injectTapEventPlugin();
const handleLogout = event =>
Auth.deauthenticateUser();
this.props.history.push("/login");
;
const isLoggedIn = event =>
if (Auth.isUserAuthenticated())
this.props.history.push(DashboardPage);
else
this.props.history.push(HomePage);
;
class App extends Component
render()
return (
<MuiThemeProvider muiTheme=getMuiTheme(lightBaseTheme)>
<Router>
<div>
<Navbar />
<Switch>
<Route exact path="/" component=isLoggedIn />
<Route path="/spotmap" component=SpotMap />
<Route path="/dashboard" component=DashboardPage />
<Route path="/signup" component=SignUpPage />
<Route path="/login" component=LoginPage />
<Route path="/logout" component=handleLogout />
<Route component=NotFound />
</Switch>
</div>
</Router>
</MuiThemeProvider>
);
export default App;
这是用 React Router v3 编写的,这是我需要转换为 React Router V4 的内容。 对我不起作用的路由是“/”和“注销”路由。
import Base from './components/Base.jsx';
import HomePage from './components/HomePage.jsx';
import DashboardPage from './containers/DashboardPage.jsx';
import LoginPage from './containers/LoginPage.jsx';
import SignUpPage from './containers/SignUpPage.jsx';
import Auth from './modules/Auth';
const routes =
// base component (wrapper for the whole application).
component: Base,
childRoutes: [
path: '/',
getComponent: (location, callback) =>
if (Auth.isUserAuthenticated())
callback(null, DashboardPage);
else
callback(null, HomePage);
,
path: '/login',
component: LoginPage
,
path: '/signup',
component: SignUpPage
,
path: '/logout',
onEnter: (nextState, replace) =>
Auth.deauthenticateUser();
// change the current URL to /
replace('/');
]
;
export default routes;
【问题讨论】:
你能把 error 包括进来吗? 你好@edgaromar90!错误是“TypeError:无法读取未定义的属性‘历史’”。我得到这个是因为,我没有从 react-router-dom 包中包含 withRouter ,但我不知道如何将它包含在 App 模块中的路由中.. TypeError: 无法读取未定义 isLoggedIn src/App.js:35 32 的属性“历史”如果 (Auth.isUserAuthenticated()) 33 | this.props.history.push(DashboardPage); 34 | 其他 > 35 | this.props.history.push(HomePage); 36 | 37 | ; 38 | 你能试试这个吗?<Route exact path="/" render=() => if (Auth.isUserAuthenticated()) (<DashboardPage)/>) else (<HomePage/>) />
解决了/路由错误!您能否请教我如何在注销后解决重定向到 /login 的问题?谢谢!!
【参考方案1】:
对于 /
路由,您应该像这样使用 render:
<Route exact path="/" render=() =>
if (Auth.isUserAuthenticated())
(<DashboardPage)/>)
else
(<HomePage/>)
/>
对于您的/logout
路由,使用<Redirect>
<Route path="/logout" render=() =>
Auth.deauthenticateUser();
return <Redirect to= pathname: "/login" />;
/>
【讨论】:
如果仍有问题,请在此处告诉我,以便我为您提供帮助。 嗨@edgaromar90!我为 /logout 路径添加了代码:redirect
@IsakLaFleur 修复了它
谢谢@edgaromar90!我还发布了一个我刚刚尝试使用 withRouter 的替代解决方案。我给了你最好的答案,因为你很有帮助!【参考方案2】:
我使用 withRouter 和 this.props.history.push('/login') 发布了 /logout 路径的第二个解决方案。
-
将 /logout 路由指向它自己的组件“Logout”
使用 react-router-dom 中的 withRouter 方法包装 Logout 组件。
Logout.js
import React, Component from "react";
import Auth from "../modules/Auth";
import withRouter from "react-router-dom";
class Logout extends Component
constructor(props)
super(props);
this.handleLogout = this.handleLogout.bind(this);
handleLogout()
Auth.deauthenticateUser();
this.props.history.push("/login");
render()
return (
<div>
this.handleLogout()
</div>
);
export default withRouter(Logout);
【讨论】:
以上是关于TypeError:无法读取未定义的属性“历史”的主要内容,如果未能解决你的问题,请参考以下文章
渲染中的错误:“TypeError:无法读取未定义的属性'_t'”在使用 Jest 的单元测试中
(节点:47028)UnhandledPromiseRejectionWarning:TypeError:无法读取未定义的属性“表情符号”