Conditional routing with ReactRouter in React

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.

console.log(this.props.history) and let us know if you got anything — BARNOWL
– BARNOWL, Commented Jul 20, 2020 at 23:45
I tried logging history using console.log(this.props.history) in the "handle_login" function, but nothing logged on the console.@BARNOWL — Arsh agarwal
– Arsh agarwal, Commented Jul 20, 2020 at 23:55
I tried console.log(this.props) in the "handle_login" function, but nothing got rendered on the console.@BARNOWL — Arsh agarwal
– Arsh agarwal, Commented Jul 21, 2020 at 0:17
I rendered props using console.log(this.props) in the render method, and the props do contain the history attribute.@BARNOWL — Arsh agarwal
– Arsh agarwal, Commented Jul 21, 2020 at 8:24

Bruno Monteiro · Accepted Answer · 2020-07-21 01:45:06Z

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.

edited Jul 21, 2020 at 1:45

answered Jul 21, 2020 at 0:06

Bruno Monteiro

4,5695 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Arsh agarwal Over a year ago

I tried binding as illustrated, but it didn't work.@BrunoMonteiro

Arsh agarwal Over a year ago

Even passing the method to onSubmit as illustrated didn't work.@BrunoMonteiro

Bruno Monteiro Over a year ago

I updated my answer, please check if that helps. It was too much info for a comment, so it was easier to update the answer :)

Arsh agarwal Over a year ago

Thanks for the update, but I am afraid neither wrapping the input tags in a form element, nor using the button tag as illustrated worked, I reckon there is a problem with the app.js file, which I have thus added in the question, could you please have a look?@BrunoMonteiro

Anku Singh · Accepted Answer · 2020-07-21 07:08:23Z

0

@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

answered Jul 21, 2020 at 7:08

Anku Singh

9546 silver badges12 bronze badges

3 Comments

Arsh agarwal Over a year ago

Thanks for answering, I tried logging the props, and the props do contain the history property, but am still not able to make the code work.@Anku

Anku Singh Over a year ago

I doubt that you are not getting history property because you are using react-router version 4.0.0 and greater and there are some changes made in version 4.0.0 or greater check this link stackoverflow.com/questions/42857283/… and make changes accordingly in route file and see if it works @Arshagarwal

Arsh agarwal Over a year ago

Actually I am already using BrowserRouter by the alias Router in the code illustrated in the link you mentioned.@Anku

Collectives™ on Stack Overflow

Conditional routing with ReactRouter in React

2 Answers 2

Update

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related