Navigate Using Redirects#

If we want to navigate programmatically, for example after submitting a form, we have to use a different method. In this example we will create a back button in the FaqItemView to return to the overview. First we will create the button:

<button onClick={onBack}>Back</button>

Then we will add the handler to handle the back event. This event will make use of the useHistory hook provide by the react-router-dom. Once you call this hook, it will give you access to the history instance that you may use to navigate. It has a push method which will push to the new route.

  const onBack = () => {
    history.push("/");
  };

The full listing of our new FaqItemView will look as follows:

import { useEffect } from "react";
import { getFaqItems } from "../actions";
import { useSelector, useDispatch } from "react-redux";
import { useParams, useHistory } from "react-router-dom";

const FaqItemView = () => {
  const { index } = useParams();
  let history = useHistory();
  const dispatch = useDispatch();
  const faqItem = useSelector((state) =>
    state.faq.length ? state.faq[index] : {}
  );

  const onBack = () => {
    history.push("/");
  };

  useEffect(() => {
    dispatch(getFaqItems());
  }, [dispatch]);

  return (
    <div>
      <h2 className="question">{faqItem.question}</h2>
      <p>{faqItem.answer}</p>
      <button onClick={onBack}>Back</button>
    </div>
  );
};

export default FaqItemView;