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 | 你能试试这个吗? &lt;Route exact path="/" render=() =&gt; if (Auth.isUserAuthenticated()) (&lt;DashboardPage)/&gt;) else (&lt;HomePage/&gt;) /&gt; 解决了/路由错误!您能否请教我如何在注销后解决重定向到 /login 的问题?谢谢!! 【参考方案1】:

对于 / 路由,您应该像这样使用 render

<Route exact path="/" render=() => 
  if (Auth.isUserAuthenticated())  
    (<DashboardPage)/>)
   else 
    (<HomePage/>)
  
 />

对于您的/logout 路由,使用&lt;Redirect&gt;

<Route path="/logout" render=() => 
    Auth.deauthenticateUser();
    return <Redirect to= pathname: "/login"  />;
    
/>

【讨论】:

如果仍有问题,请在此处告诉我,以便我为您提供帮助。 嗨@edgaromar90!我为 /logout 路径添加了代码: Auth.deauthenticateUser() && history.push("/"); /> 我得到这个错误:Route.render(): A valid React element (or null) must be returned。您可能返回了未定义、数组或其他一些无效对象。 在这个答案中,他们使用的是 withRouter 方法。我可以使用的东西?如果您可以帮助我们解决注销路径,请告诉我。 ***.com/questions/42701129/… 使用redirect@IsakLaFleur 修复了它 谢谢@edgaromar90!我还发布了一个我刚刚尝试使用 withRouter 的替代解决方案。我给了你最好的答案,因为你很有帮助!【参考方案2】:

我使用 withRouterthis.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 的单元测试中

TypeError:无法读取未定义的属性“分支”

TypeError:无法读取未定义的属性“getters”

(节点:47028)UnhandledPromiseRejectionWarning:TypeError:无法读取未定义的属性“表情符号”

NextJS:TypeError:无法读取未定义的属性“json”

TypeError:无法使用 TSLint 和 TypeScript 读取未定义的属性“getFullWidth”