Javascript 反应路由重定向

我在React中阅读了所有可能的关于编程重定向的线程，但我无法使其工作

我的代码如下所示（为了缩短代码，我尽可能地删除了）：

从“React”导入React；
从'react dom'导入{render}；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“/Login/Login”导入{Login}；
类应用程序扩展了React.Component{
登录（loginResponse）{
...
#在这里，我想重定向，但它不工作
this.props.history.push（'/some path/'）；
}
render（）{
返回(
...
} />
);
}
}
render（，document.getElementById（“app”）；

我想在登录方法被调用到其他路径时重定向。 使用

this.props.history.push（'/somepath/'）我获取
无法读取未定义的属性“push”

在大多数地方，我读到了关于使用路由器的
，
，但我无法让它工作

获取
历史记录时，我遗漏了什么？
或者，让重定向工作起来最容易的方法是什么

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

最后，我移动了一点登录，并从
登录
组件执行重定向，该组件由于
路由
组件而呈现，因此可以访问
历史

这是我使用的代码：

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"));

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>
    );
  }
}

从“React”导入React；
从'react dom'导入{render}；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“/Login/Login”导入{Login}；
类应用程序扩展了React.Component{
render（）{
返回(
...
} />
);
}
}
render（，document.getElementById（“app”）；

Login.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"));

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>
    );
  }
}

从“React”导入React；
导出类登录扩展React.Component{
建造师（道具）{
超级（道具）；
this.onLoginResponse=this.onLoginResponse.bind（this）；
}
仅限loginResponse（loginResponse）{
...
this.props.router.history.push（'/portal/'）；
}
render（）{
返回(
登录页面。。。
);
}
}

这样做的好处是，现在处理登录响应的代码位于登录页面中。
但由于我想存储登录到主应用程序状态的用户，我需要做一些额外的工作。
您实际在哪里调用登录功能？您的应用程序是否有历史记录？您是否在应用程序中使用withRouter？我想不行。你们可以试试路由器，但我不知道在那个样的主应用程序中使用它有多合适。为什么不使用来自dom的重定向？我不是专业人士，但我在登录页面上使用重定向。成功登录后，页面将重定向到所需的url。应用程序是路由器的父级，因此即使使用路由器，也无法在此确切配置中工作，因为父级上没有上下文。组件是一个很好的建议，但任何一个孩子都可以在道具上获得历史。。需要查看登录的位置才能给出具体答案我取消了对
login
的调用，因为我认为这与此无关。我试着用路由器使用
，
，但它看起来无法在主应用程序上使用，因为没有启动任何程序。我将如何以编程的方式使用？我试图渲染它，但再次失败。我还试图将
历史记录
传递给
登录
组件，但实际效果良好。我真的很想从这里重定向。。。但我想如果不能在主组件上使用历史，我可以在子组件中使用。