Javascript React路由器不会基于状态重定向

在代码中，它到达isRegistered函数，我知道这是因为我有console.log状态。注册状态等于true。因此，基于代码，它应该重定向到/login，但事实并非如此

从“React”导入React
导入“/Register.css”；
从“react router dom”导入{BrowserRouter as Route，Redirect，Link}
常量initialUser={
用户名：“”，
电邮：“，
密码：“”，
密码2:“”，
姓名：“
}
类寄存器扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户：initialUser，
已注册：“”
};
}
onUsernameChange=事件=>{
this.setState（{username:event.target.value}）；
};
onNameChange=事件=>{
this.setState（{name:event.target.value}）；
};
onEmailChange=事件=>{
this.setState（{email:event.target.value}）；
};
onPasswordChange=事件=>{
this.setState（{密码：event.target.value}）；
};
onPassword2Change=事件=>{
this.setState（{password2:event.target.value}）；
};
isRegistered（）{
const{registered}=this.state；
console.log（注册为'here'，this.state）
如果（注册）{
返回(
)
}
}
onRegister=（）=>{
取回（“http://localhost:3000/register", {
方法：“张贴”，
标题：{“内容类型”：“应用程序/json”}，
正文：JSON.stringify({
名称：this.state.name，
电子邮件：this.state.email，
用户名：this.state.username，
密码：this.state.password，
password2:this.state.password2
})
})
.then（res=>res.json（））
。然后（数据=>{
console.log（data.isregisted）；
如果（数据已注册）{
this.setState（{registered:true}）
这是注册的（）；
}
})
};
render（）{
返回
登记

有账户吗？

;
}
}
导出默认寄存器
您不能通过调用组件生命周期或方法中的另一个方法来返回呈现中的
重定向
元素

你需要用路由器

HOC包装你的组件，它提供了历史道具

import {BrowserRouter as Route,, withRouter, Redirect, Link} from 'react-router-dom'


export default withRouter(Register);

如果要以编程方式导航，请执行以下操作：

isRegistered = () => {
const { registered } = this.state;
console.log(registered, 'here', this.state)
if (registered) {
 this.props.history.push('/login)
 }
}

---

下面是一个简单的例子，说明如何在点击按钮时重定向。希望这对您有所帮助

import React, { Component } from "react";
import { BrowserRouter,Route,Switch } from 'react-router-dom'
class App extends Component {
  render() {
    return (
      <BrowserRouter>
      <Switch>
      <Route path="/" exact component={Sample}/>
      <Route path="/test" exact render={()=>(<p>Test</p>)}/>
      </Switch>
      </BrowserRouter>
    )
  }
}
class Sample extends React.Component {
  constructor(props) {
    super(props)
    this.Click = this.Click.bind(this) // you need to bind the method
  }
  Click() {
    this.props.history.push('/test');
  }
  render() {
    return(
      <button onClick={this.Click}>Click</button>
    )
  }
}
export default App;

import React，{Component}来自“React”；
从“react router dom”导入{BrowserRouter，Route，Switch}
类应用程序扩展组件{
render（）{
返回(
（测试
）}/>
)
}
}
类示例扩展了React.Component{
建造师（道具）{
超级（道具）
this.Click=this.Click.bind（this）//您需要绑定该方法
}
单击（）{
this.props.history.push（'/test'）；
}
render（）{
返回(
点击
)
}
}
导出默认应用程序；

您可以对代码进行一些改进。这是我的建议

您不需要绑定任何内容

。您正在使用最新的

React

。我怎么知道的？您正在执行的是

onUsernameChange=evnet=>{}

而不是

onUsernameChange（事件）{}

。总的来说@Sakhi Mansoor是对的

从“React”导入React；
导入“/Register.css”；
进口{
BrowserRouter作为路由，
用路由器，
重新使用
链接
}从“反应路由器dom”；
常量initialUser={
用户名：“”，
电邮：“，
密码：“”，
密码2:“”，
姓名：“
};
类寄存器扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户：initialUser，
注册：“
};
}
handleChange=事件=>{
这是我的国家({
用户：{
…此.state.user，
[event.target.name]：event.target.value
}
});
};
isRegistered=（）=>{
const{registered}=this.state；
log（注册为“here”，this.state）；
如果（注册）{
this.props.history.push（“/login”）；
}
};
onRegister=事件=>{
event.preventDefault（）；
取回（“http://localhost:3000/register", {
方法：“张贴”，
标题：{“内容类型”：“应用程序/json”}，
正文：JSON.stringify（this.state.user）
})
.then（res=>res.json（））
。然后（数据=>{
console.log（data.isregisted）；
如果（数据已注册）{
this.setState（{registered:true}）；
这是注册的（）；
}
});
};
render（）{
返回(
登记

有账户吗？

);
}
}
使用路由器导出默认值（寄存器）@bhojendraauniyar我的想法是，一旦他们注册，就应该重定向到登录页面。我按照你说的做了建议的编辑，但我仍然没有被重定向。我需要对主App.js做些什么吗？你遇到了什么错误？确保你的方法被调用，你的路由器实现在哪里。就是这样，没有错误，我没有被重定向。我知道它正在到达函数，因为console.log工作正常，这表明this.state.registed等于true，这反过来会使您的代码运行，但是我没有被重定向。我相信您忘记了绑定方法。此方法未定义您的问题是否已修复？使用此方法，出于某种原因，它将显示登录页面一秒钟，然后返回到注册页面。