在 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;

I am trying to redirect the 'login' component to the '/home' using withRouter using the aforementioned code, but running the code does nothing, neither does it throw any error.I have attached the codes of both the home and the login components.

Answer 1

The main issue is probably because you forgot your constructor to get the props and bind your method .

Update your class to this

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)

I would also suggest passing your method to the onSubmit handle, instead of creating a new function there:

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

---

Update

I also notice that you have 2 inputs of type submit , which is not very common. Your action is also in the onSubmit and not onClick , but you don't have a <form> which is usually what triggers the submit function.

My suggestion is to review your HTML structure as well and make sure it make sense. For now, try this to at least get your method working:

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

There is an interesting discussion here , as additional reference.

Answer 2

@BrunoMonteiro is correct but there is an alternate option for this you can declare your function as arrow function so that you don't have to bind

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)

also make sure you have access to history property in your props for checking this you can do console.log(this.props) and check whether it has required property or not