JIYIK CN >

Use React Router to return to the previous page:

1. Use useNavigate()hooks, for example const navigate = useNavigate();.
2. navigate()Calls the function passed to it -1 - navigate(-1).
3. Calling navigate with -1 is the same as clicking the back button.

import {Link, Routes, Route, useNavigate} from 'react-router-dom';

export default function App() {
  const navigate = useNavigate();

  return (
    <div>
      <button onClick={() => navigate(-1)}>Go back</button>
      <button onClick={() => navigate(1)}>Go forward</button>

      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        {/* 👇️ Wrap your Route components in a Routes component */}
        <Routes>
          <Route path="/about" element={<About />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
    </div>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

useNavigateThe hook returns a function that lets us navigate programmatically, such as after submitting a form or clicking a button.

To return to the previous page, pass -1 as an argument to navigate()the function, for example avigate(-1).

Invoking navigation with -1 is the same as clicking the back button.

Likewise, we can call the navigation function with -2 to go back 2 pages.

To navigate to a different route programmatically, pass the path to the navigation function, navigate('/about')e.g.

import {useNavigate} from 'react-router-dom';

export default function App() {
  const navigate = useNavigate();

  const handleClick = () => {
    // 👇️ replace set to true
    navigate('/about', {replace: true});
  };

  return (
    <div>
      <button onClick={handleClick}>Navigate to About</button>
    </div>
  );
}

When the replaceoptions property of a object is set to true, the current entry in the history stack will be replaced by the new entry.

In other words, navigating to a new route will not push a new entry into the history stack, so if the user clicks the back button, they will not be able to navigate to the previous page.

This is useful when the user is logged in, as we don't want them to be able to click the back button and return to the login page.

It is also useful if we have a route that redirects the user to a different page, because you don't want the user to click the back button and be redirected again.

If we need to navigate forward one page, call 1 - navigate(1)navigation using .

To use hooks in your application useNavigate, make sure the App component in your index.js file is wrapped in a router.

import {createRoot} from 'react-dom/client';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// 👇️ wrap App in Router
root.render(
  <Router>
    <App />
  </Router>
);

The best place to wrap your React application with the Router component is in the index.js file, since this is the entry point for your React application.

Once your entire app is wrapped in a Router component, you can use any hook from the react router package anywhere in your component.