React router isn't navigating

Question

I have a signIn and signUp in the nav bar.

My "/" path renders SignUp component and the SignUp component has a form with input and button.

On sumbitting the form or clicking the button I should be taken to ("/signin") SignIn page which renders my signIn component.

But, my issue is once i click button or sumbit the form it still stays in the ("/") signUp page and doesn't navigate to signIn page ("/signin")

Code :

import { Redirect } from "react-router-dom";

function Signup() {
  const handleClick = () => {
    <Redirect to="/signin" />;
  };
  return (
    <div>
      <form>
        <label>
          Enter Mobile Number
        </label>
        <input />
        <button onClick={handleClick} >
          Get OTP
        </button>
      </form>
    </div>
  );
}

export default Signup;

App.js

function App() {
  return (
    <Router>
      <div>
        <Nav />
        <Switch>
          <Route exact path="/" component={Signup} />
          <Route path="/signin" component={SignIn} />
        </Switch>
      </div>
    </Router>
  );
}

Things I tried to fix this,

I wrapped in button :

<button onClick={handleClick} >
<Link to="/signin"> Get OTP </Link>
</button>

I also tried onSumbit in form instead of onClick

Shravan Dhar · Accepted Answer · 2021-06-01 13:43:45Z

3

One way is to compose in a Link element like:

import { Link } from "react-router-dom";
<Link to='/'>
  <button>
     Redirect to home
  </button>
</Link>

And for form, you can do like:

import { history } from "react-router-dom";
<form onSubmit={() => history.push("/")}>
...
</form>

edited Jun 1, 2021 at 13:43

answered Jun 1, 2021 at 13:41

Shravan Dhar

1,57011 silver badges20 bronze badges

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

Comments

Deep1man3 · Accepted Answer · 2021-06-01 13:36:42Z

3

You need to wrap the button in Link:

<Link to='/'>
  <button>
     Redirect to home
  </button>
</Link>

and add Link component from 'react-router-dom':

import { Link } from "react-router-dom";

edited Jun 1, 2021 at 13:36

answered Jun 1, 2021 at 13:29

Deep1man3

1921 silver badge3 bronze badges

5 Comments

Sai Krishnadas Over a year ago

Thanks, This works ! I will accept this answer. And what if i need to use the onSubmit on form instead of onClick of button? Wraping the whole form doesn't work i guess

guilherme victor ramalho natal Over a year ago

In this case you can use history.push(path);

Sai Krishnadas Over a year ago

Using <Redirect /> works in that case ? @guilhermevictorramalhonatal

guilherme victor ramalho natal Over a year ago

Yes works. but you will need a conditional to fire the redirect.

Deep1man3 Over a year ago

Quickly scribbled Redirect from home page to dashboard page: link

Collectives™ on Stack Overflow

React router isn't navigating

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related