在 React 中使用 ReactRouter 进行条件路由

Question

class Login extends Component {
  async 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)

class App extends Component {
  // app.js

 render() {
 
return (
    <Router> 
      <div className='App' style={{marginTop:'0px'}}>
        <div className='container'>
          <Header></Header>
            
        <Route exact style={{marginTop:'0px'}} path='/' render={(props)=>(
  
   <div style={{display:'flex',justifyContent:'center'}}>
     {/* add  a  background in this div */}
   <Link to='/login' style={{color:'#000000', fontSize:'large',paddingRight:'10px' }}> Login </Link>
   
   <Link to='/' style={{color:'#000000', fontSize:'large' }}> Index </Link>
   </div>


)}></Route>


  <Route exact path='/home' component={Home}></Route>
  <Route  exact path='/login' component={Login}></Route>
  </div>   
  </div>  
       </Router>
  );
 }}
 export default App;

我正在尝试使用上述代码使用 withRouter 将“登录”组件重定向到“/home”，但运行代码什么也不做，也不会引发任何错误。我已经附上了 home 和登录组件。

Answer 1

主要问题可能是因为您忘记了构造函数来获取道具和bind your method。

将您的课程更新为此

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)

我还建议将您的方法传递给onSubmit 句柄，而不是在那里创建一个新函数：

<input type='submit' value='Log in' onSubmit={this.handle_login}></input>

---

更新

我还注意到您有 2 个 submit 类型的输入，这并不常见。您的操作也在onSubmit 中，而不是onClick，但您没有<form>，这通常是触发submit 函数的原因。

我的建议是同时检查您的 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>
  );
}

有一个有趣的讨论here，作为补充参考。

Answer 2

@BrunoMonteiro 是正确的，但有一个替代选项，您可以将函数声明为箭头函数，这样您就不必绑定

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)

还要确保您可以访问 props 中的 history 属性以检查这一点，您可以执行 console.log(this.props) 并检查它是否具有必需的属性