Redirect to another Page on Button click in React

# Redirect to another page on button click in React

To redirect to another page on button click in React:

Use the useNavigate() hook, e.g. const navigate = useNavigate();.
Call the navigate() function, passing it the path - navigate('/about').
The navigate() function lets us navigate programmatically.

App.js

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

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

  const navigateToContacts = () => {
    // 👇️ Navigate to /contacts
    navigate('/contacts');
  };

  const navigateHome = () => {
    // 👇️ Navigate to /
    navigate('/');
  };

  return (
    <div>
      <div>
        <button onClick={navigateHome}>Home</button>
        <hr />
        <button onClick={navigateToContacts}>Contacts</button>

        <Routes>
          <Route path="/contacts" element={<Contacts />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
    </div>
  );
}

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

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

The code for this article is available on GitHub

The useNavigate hook returns a function that lets us navigate programmatically, e.g. after a form is submitted or a button is clicked.

The navigate function can be passed a delta, e.g. -1 to go one page back, 1 to go one page forward, or a path -navigate('/contacts').

The function also takes an options object.

App.js

Copied!
const navigateToContacts = () => {
  navigate('/contacts', {replace: true});
};

When the replace property on the options object is set to true, the current entry in the history stack gets replaced with the new one.

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

For example, this is useful when a user logs in because you don't want them to be able to click the back button and get back to the login page.

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

Want to learn more about redirecting in React.js? Check out these resources: Redirect on form submit using React Router,How to Redirect to an Internal/External URL in React,Set a Default route with redirect using React Router.

# Wrap your React application in a `Router` component

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

index.js

Copied!
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 the App in a Router
root.render(
  <Router>
    <App />
  </Router>
);

wrap your react application in router component

The code for this article is available on GitHub

The best place to wrap your React app with a Router component is in your index.js file because that's the entry point of your React application.

Once your entire app is wrapped with a Router component, you can use any of the hooks from the React router package anywhere in your components.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Redirect to another Page on Button click in React