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, Jul 20 '20 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, Jul 20 '20 at 23:55
I tried `console.log(this.props)` in the "handle_login" function, but nothing got rendered on the console.@BARNOWL — Arsh agarwal, Jul 21 '20 at 00:17
I rendered props using `console.log(this.props)` in the `render` method, and the props do contain the `history` attribute.@BARNOWL — Arsh agarwal, Jul 21 '20 at 08:24
Thanks for replying, but I am afraid the doubt has not been resolved yet.@BARNOWL — Arsh agarwal, Jul 21 '20 at 23:07
you have a link to a repo, or can you make a codesandbox of this ? — BARNOWL, Jul 22 '20 at 02:31
Here's the link to my github repo [ https://github.com/arshagarwal/I_sanatorium ], thanks.@BARNOWL — Arsh agarwal, Jul 22 '20 at 22:38
will look into this. so the issue is you can't be directed the home page ? its a been few days since i looked at this question. Just want to make sure. — BARNOWL, Jul 22 '20 at 23:22
its.... working for me. im able to login and im directed to home. I made no changes. — BARNOWL, Jul 23 '20 at 00:34
I am not redirected to 'home' when the submit button is pressed, could it be due to browser, I am using Chrome on ubuntu?@BARNOWL — Arsh agarwal, Jul 23 '20 at 05:45

Bruno Monteiro · Answer 1 · 2020-07-21T01:45:06.583

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.

I tried binding as illustrated, but it didn't work.@BrunoMonteiro — Arsh agarwal, Jul 21 '20 at 00:15
Even passing the method to `onSubmit` as illustrated didn't work.@BrunoMonteiro — Arsh agarwal, Jul 21 '20 at 00:23
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 :) — Bruno Monteiro, Jul 21 '20 at 01:45
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 — Arsh agarwal, Jul 21 '20 at 06:59

score 0 · Answer 2 · answered Jul 21 '20 at 07:08

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 '20 at 07:08

Anku Singh

914
6
12

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 – Arsh agarwal Jul 21 '20 at 08:29
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 https://stackoverflow.com/questions/42857283/react-router-typeerror-this-props-history-is-undefined and make changes accordingly in route file and see if it works @Arshagarwal – Anku Singh Jul 21 '20 at 08:37
Actually I am already using `BrowserRouter` by the alias `Router` in the code illustrated in the link you mentioned.@Anku – Arsh agarwal Jul 21 '20 at 23:06

Conditional routing with ReactRouter in React

2 Answers2

Update