Question

我在React中阅读了有关以编程方式重定向的所有可能线程，但我无法使其正常工作。

我的代码看起来像这样（我尽可能地删除它以使其更短）：

import React from 'react';
import {render} from 'react-dom';
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
import {Login} from "./login/Login";

class App extends React.Component {
  login(loginResponse) {
    ...
    # Here I want to redirect but it does not work
    this.props.history.push('/some-path/');
  }

  render() {
    return (
      <Router>
        <div>
          <div id="content">
            <Messages />
            <Switch>
              <Route path="/" exact={true} component={Welcome} />
              ...
              <Route path="/portal/login" render={() => <Login sendMessage={this.sendMessage} />} />
            </Switch>
          </div>
        </div>
      </Router>
    );
  }
}

render(<App/>, document.getElementById("app"));

我想在将login方法调用到其他路径时重定向。使用this.props.history.push('/some-path/');，我得到Cannot read property 'push' of undefined。

在我阅读的大多数地方withRouter，但我无法使其发挥作用。

我错过了history的错误？或者最简单的重定向是什么？

提前致谢

Answer 1

我认为这里的主要问题是我试图在顶级组件上实现重定向。

由于Login组件，我最后移动了一些登录并从Route组件进行了重定向，因此可以访问history。

这是我使用的代码：

<强> main.js

import React from 'react';
import {render} from 'react-dom';
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
import {Login} from "./login/Login";

class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <div id="content">
            <Messages />
            <Switch>
              <Route path="/" exact={true} component={Welcome} />
              ...
              <Route path="/portal/login" render={(router) => <Login router={router} sendMessage={this.sendMessage} />} />
            </Switch>
          </div>
        </div>
      </Router>
    );
  }
}

render(<App/>, document.getElementById("app"));

<强> Login.js

import React from 'react';

export class Login extends React.Component {
  constructor(props) {
    super(props);
    this.onLoginResponse = this.onLoginResponse.bind(this);
  }

  onLoginResponse(loginResponse) {
    ...
    this.props.router.history.push('/portal/');
  }

  render() {
    return (
      <div id="login-form">
        Login page ...
      </div>
    );
  }
}

这样做的好处是，现在处理登录响应的代码位于“登录”页面中。但是，由于我想存储登录到主应用程序状态的用户，我需要做一些额外的工作。

反应路线重定向

1 个答案: