× history.props.push() 得到“TypeError: Cannot read property 'push' of undefined”，即使将组件包装在 withRouter()

Question

我正在尝试用户浏览器路由以在我的应用程序中呈现不同的组件。 使用本教程作为参考：https://www.youtube.com/watch?v=Nq9RmAB9eag

当我尝试使用 this.props.history.push('Path I want to go to') 我得到 TypeError: Cannot read property 'push' of undefined。常见的解决方案是使用 withRouter() 包装组件，但我已经这样做了，但我仍然收到错误。

我也尝试过重定向到与“/”不同的路径。

我在不同的组件中使用了相同的功能，它工作正常。

这是错误：

TypeError: Cannot read property 'push' of undefined
AuthenticatedComponent.render
C:/Users/Liam/Desktop/appFolder/client/src/components/AuthenticatedComponent.js:41
  38 | 
  39 |  render() {
  40 |    console.log(this.state);
> 41 |    this.props.history.push('/');
     | ^  42 |    if (this.state.user === undefined) {
  43 |      return (
  44 |        <div><h1>Loading...</h1></div>

这里是非工作组件的代码（AuthenticatedComponent.js）

import React, { Component } from 'react';
import { getJwt } from '../utilities/jwt'
import { withRouter } from 'react-router-dom'
import axios from 'axios'

export class AuthenticatedComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: undefined
    };
  }

  componentDidMount() {
    const jwt = getJwt();
    if (!jwt) {
      // If no JWT token, bring user back to login page (currently root)
      this.props.history.push('/');
    }



    axios.get('api/getUser', { headers: { "auth-token": jwt } }).then((res) => {
      this.setState({user: res.data})

    }
    ).catch(err => {

      console.log("An error occurred getting user: ", err);
      localStorage.removeItem('jwt');
      // Redirect to login
      this.props.history.push('/');
    });


  }

  render() {
    console.log(this.state);
    if (this.state.user === undefined) {
      return (
        <div><h1>Loading...</h1></div>
      )
    }
    return (
      <div>{this.props.children}</div>
    );
  }
}
export default withRouter(AuthenticatedComponent);

这里是 app.js

import React from 'react';
import { LoginContainer } from './components/LoginForm/LoginContainer';
import { AuthenticatedComponent } from './components/AuthenticatedComponent'
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Protected from './components/ProtectedExample'

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route path="/" exact component={LoginContainer} />
          <AuthenticatedComponent>
            <Route path="/Protected" component={Protected} />
          </AuthenticatedComponent>
        </Switch>
      </BrowserRouter>

    )
  }
}

export default App;

Answer 1

这可以解决您的问题：

import React from 'react';
import { LoginContainer } from './components/LoginForm/LoginContainer';
import { AuthenticatedComponent } from './components/AuthenticatedComponent'
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Protected from './components/ProtectedExample'

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route path="/" exact component={LoginContainer} />
          <Route 
            path="/Protected" 
            render={props => (
              <AuthenticatedComponent history={props.history}>
                <Protected/>
              </AuthenticatedComponent>
            )}
          />
        </Switch>
      </BrowserRouter>
    )
  }
}

export default App;

---

另一种解决方案是安装 history 包，以便访问 Route 组件之外的“历史”。

有关后者的更多信息，请查看此 SO 答案：How to Access History Object Outside of a React Component

Answer 2

您必须向浏览器路由器提供历史记录，

import { createBrowserHistory } from 'history';

...

const browserHistory = createBrowserHistory();

return   <BrowserRouter history={browserHistory}> 
...
</BrowserRouter>