如何在带有 React-Router 的 React 中路由到 function 内的页面？

Question

I have a form in my react app that I made w/ bootstrap and react-router. When the user hits submit, I want them to go to a page, if the credentials are correct, else do nothing.

<button
  class="btn btn-primary font-weight-bold"
  type="submit"
  onClick={handleSubmit}
>
Submit</button>

...

function handleSubmit() {
  if (credentials.are.correct) {
    // go to page here
  }
}

Is there a way to do the above in react-router, without installing any third-party software?

Answer 1

here you can read how you can use history.push("route") method to use it in your code. So you just check if credentials are fine and if yes you just do history.push to a route that you want.

Answer 2

Assuming you're all set and have you app wrapped in Router provider you can useHistory hook. Here's an example from react-router-dom docs:

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

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

Answer 3

react-router has very nice documentation on this subject:)

https://reactrouter.com/web/api/Hooks/usehistory

just do it like this if you are using hooks

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}