Javascript React中ReactRouter的条件路由

类登录扩展组件{
异步句柄\u登录（e）{
e、 预防默认值（）；
this.props.history.push（“/home”）
}
render（）{
报税表（
this.handle_login（e）}>
此.handle_注册（e）}>
);
}
}
使用路由器导出默认值（登录）

主要问题可能是因为您忘记了构造函数获取道具和密码

将您的类更新为此

class Login extends Component {
  constructor(props) {
    super(props);

    // This binding is necessary to make `this` work in the callback
    this.handle_login = this.handle_login.bind(this);
  }
  
  // No "async" need here
  handle_login(e) {
    e.preventDefault();
    this.props.history.push('/home')
  }
  render() {
    return (     
      <input type='submit' value='Log in' onSubmit={(e)=>this.handle_login(e)}></input>
      <input type='submit'value='Sign up' onSubmit={(e)=>this.handle_signup(e)}></input>
    );
  }
}

export default withRouter(Login)

---

更新 我还注意到，您有两个类型为

submit

的输入，这并不常见。您的操作也在

onSubmit

中，而不是

onClick

，但您没有触发

提交功能的

我的建议是检查你的HTML结构，并确保它是有意义的。现在，请尝试以下方法，至少可以让您的方法正常工作：

render() {
  // buttons have type="submit" by default, so no need to include that
  return (
    <button value='Log in' onClick={(e)=>this.handle_login(e)}></input>
  );
}

render（）{
//默认情况下，按钮具有type=“submit”，因此无需包括该按钮
返回(
this.handle_login（e）}>
);
}

这里有一个有趣的讨论，作为补充参考。
@BrunoMonteiro是正确的，但是有一个替代选项，您可以将函数声明为arrow函数，这样就不必绑定

class Login extends Component {
  constructor(props) {
    super(props);
  }
  
  
  handle_login=async(e)=> {
    e.preventDefault();
    this.props.history.push('/home')
  }
  render() {
    return (     
      <input type='submit' value='Log in' onClick={(e)=>this.handle_login(e)}></input>
      <input type='submit'value='Sign up' onClick={(e)=>this.handle_signup(e)}></input>
    );
  }
}

export default withRouter(Login)

类登录扩展组件{
建造师（道具）{
超级（道具）；
}
handle\u login=async（e）=>{
e、 预防默认值（）；
this.props.history.push（“/home”）
}
render（）{
报税表（
this.handle_login（e）}>
此.handle_注册（e）}>
);
}
}
使用路由器导出默认值（登录）

另外，请确保您有权访问道具中的历史记录属性，以便进行检查。您可以执行console.log（this.props）并检查它是否具有必需的属性
console.log（this.props.history）
，如果您有任何问题，请告诉我们我是否尝试使用中的
console.log（this.props.history）
“handle\u login”函数，但控制台上没有记录任何内容。@BARNOWLI尝试执行
console.log（this.props）
我在“handle\u login”函数中尝试了
console.log（this.props）
，但控制台上没有呈现任何内容。@BARNOWLI使用
console.log（this.props）呈现道具
在
render
方法中，道具确实包含
history
属性。@BARNOWLI尝试了如图所示的绑定，但无效。@Brunomonteiroe即使将该方法传递给
onSubmit
也无效。@BrunoMonteiroI更新了我的答案，请检查是否有帮助。信息太多，无法发表评论，因此更新答案更容易：）谢谢更新，但我担心既没有将输入标记包装在表单元素中，也没有使用如图所示的按钮标记，我认为
app.js
文件有问题，我在问题中添加了该文件，请看一看？@BrunoMonteiroThanks回答，我尝试记录道具，但道具确实包含“历史记录”属性，但仍然无法使代码正常工作。@AnkuI怀疑您没有获得“历史记录”属性，因为您使用的是react router 4.0.0及更高版本，并且在4.0.0或更高版本中进行了一些更改。请检查此链接并在路由中进行相应更改文件并查看它是否有效@arshagarwal实际上我已经在您提到的链接中所示的代码中使用别名
Router
的
BrowserRouter
。@Anku
class Login extends Component {
  constructor(props) {
    super(props);
  }
  
  
  handle_login=async(e)=> {
    e.preventDefault();
    this.props.history.push('/home')
  }
  render() {
    return (     
      <input type='submit' value='Log in' onClick={(e)=>this.handle_login(e)}></input>
      <input type='submit'value='Sign up' onClick={(e)=>this.handle_signup(e)}></input>
    );
  }
}

export default withRouter(Login)