How to programmatically navigate using React Router

0 votes

How to programmatically navigate using React Router?

I’m using React Router in my project, and I need to navigate to a different route programmatically, such as after a form submission or a button click. I’ve come across terms like useNavigate and history, but I’m unsure how to implement this correctly in React Router. Can someone guide me?

Nov 26 in Web Development by Nidhi
• 3,820 points
30 views

1 answer to this question.

0 votes

In React Router v6, we can use the useNavigate hook to navigate programmatically.

1. Using useNavigate Hook (React Router v6+)

Example:

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

function MyComponent() {

  const navigate = useNavigate();

  const handleNavigate = () => {

    navigate('/about'); // Navigate to '/about'

  };

  return (

    <div>

      <button onClick={handleNavigate}>About</button>

    </div>

  );

}

navigate('/about'): This will navigate to the /about route.

The navigate function can also accept additional options, like replace or state.

Example with options:

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

function MyComponent() {

  const navigate = useNavigate();

  const handleNavigate = () => {

    navigate('/about', { replace: true, state: { from: 'home' } });

  };

  return (

    <div>

      <button onClick={handleNavigate}>Go to About</button>

    </div>

  );

}

answered Nov 27 by kavya

Related Questions In Web Development

0 votes
0 answers

How to fix the missing dependency warning when using the useEffect React Hook?

How to fix the missing dependency warning ...READ MORE

Nov 26 in Web Development by Nidhi
• 3,820 points
33 views
0 votes
1 answer

How to upload zip from the S3 bucket to lambda function using AWS CLI

Hi@Abhishek, You want to upload your zip file ...READ MORE

answered Apr 10, 2020 in Web Development by MD
• 95,460 points
5,810 views
0 votes
1 answer

How to place images using jQuery masonry plugin to start

You were just missing a css class that adjusts ...READ MORE

answered Jun 22, 2022 in Web Development by rajatha
• 7,680 points
570 views
0 votes
1 answer

How to create a simple map using JavaScript/JQuery

var map = new Object(); // or ...READ MORE

answered Jun 27, 2022 in Web Development by rajatha
• 7,680 points
1,368 views
0 votes
1 answer

TypeScript - ',' expected.ts(1005)

You can't put statements in JSX curly braces, only expressions. You ...READ MORE

answered Jun 9, 2022 in TypeSript by Nina
• 3,060 points
14,147 views
0 votes
1 answer

How to use useState hook in React with TypeScript correctly?

Without any initial argument, the type of email and setEmail will ...READ MORE

answered Jun 10, 2022 in TypeSript by Nina
• 3,060 points
1,930 views
0 votes
1 answer

Naming of TypeScript's union and intersection types

The type A | B refers to objects which ...READ MORE

answered Jun 10, 2022 in TypeSript by Nina
• 3,060 points
412 views
0 votes
0 answers

Create a react app react 18 with typescript

I am trying to create react 18 ...READ MORE

Jul 5, 2022 in TypeSript by Logan
• 2,140 points
882 views
0 votes
1 answer

How can you add a class to an element using jQuery?

For adding a class to an element ...READ MORE

answered Nov 13 in Web Development by kavya
65 views
0 votes
1 answer

How to loop inside React JSX?

Suppose you have a React component and ...READ MORE

answered Nov 19 in Web Development by kavya
36 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP