React Router Navigate pathing

Question

I would like to understand better how the useNavigate works as I'm not really understanding the pattern.

This is my Routes

<BrowserRouter> <Routes> <Route path="/" element={<Homepage />} /> </Routes> <Routes> <Route path="/questionaire" element={<Questionaire />} /> <Route path="questionaire/1" element={<Question1 />} /> <Route path="questionaire/2" element={<Question1 />} /> </Routes> </BrowserRouter>

On the Questionaire page I use navigate("1") and it goes into the path "/questionaire/1" - Nice!

Now on question1 I want to go into "/questionaire/2":

navigate("2") - leads me into /questionaire/1/2
navigate("/2") - leads me into /2
navigate("questionare/2") - leads me into /questionaire/1/questionaire/2

How do I make an increment so every question just adds ++ How do I go from questionaire/5 into questionaire/2 using navigate?

I'm using navigate in buttons, should I use LINK? with a button nested in it? Why?

EDIT: doesn't necessarily have to increment the value, but just replace the current number with the one I want - ex question/1 to question/2 or from question/5 to question/3

Drew Reese · Accepted Answer · 2022-05-02 21:54:13Z

What you are asking about is the fundamental difference between absolute and relative routing. In react-router-dom@6 the only thing that differentiates relative links and routes from absolute links and routes is the leading "/" character.

Absolute links and routes:
- Begin with a leading "/" character, i.e. "/root/segment1/segment2"
- Replace the entire path
```
// "/root/segment1" navigate("/root/otherPath"); // "/root/otherPage" 
```

Relative links and routes:

Do not begin with a leading "/" character, i.e. "segment2"

Append to the current path

// "/root/segment1" navigate("otherPath"); // "/root/segment1/otherPage"

...

// "/root/segment1" navigate("../otherPath"); // "/root/otherPage"

I suggest the following route refactor:

All sibling routes can be wrapped and rendered by a single Routes component.
Use layout and index routes to help manage/organize nested routes.

Code

<BrowserRouter> <Routes> <Route path="/" element={<Homepage />} /> <Route path="/questionaire"> <Route index element={<Questionaire />} /> // "/questionaire" <Route path="1" element={<Question1 />} /> // "/questionaire/1" <Route path="2" element={<Question2 />} /> // "/questionaire/2" ... <Route path="<N>" element={<QuestionN />} /> // "/questionaire/<N>" </Route> </Routes> </BrowserRouter>

Use absolute paths to navigate from to the parent path or from question to question:

navigate("/questionaire"); // to parent navigate("/questionaire/1"); // to question # navigate("/questionaire/2"); navigate("/questionaire/N");

Use relative paths from the parent layout route on path="/questionaire":

navigate(".."); // to parent navigate("../1"); // to question # navigate("../2"); navigate("../N");

Notice here that we can use ".." to navigate relatively to the parent route. This is useful to navigate along sibling components.

choco · Accepted Answer · 2022-04-30 11:57:18Z

as i know. (i am noob)

On the Questionaire page I use navigate("1") and it goes into the path "/questionaire/1" - Nice! Now on question1 I want to go into "/questionaire/2": navigate("2") - leads me into /questionaire/1/2

When you use just a number or string, useNav just adding it with / after current path. If you instead of number 2 write 'hi' it navigate you to /hi.

navigate("/2") - leads me into /2.

Its because you wrote absolute path, if before your string in useNav you will add "/", then its meaning "yourhost"+"your string". example: Your host is localhost:3000. If you entered '/test' in useNav it will be localhost:3000/test. Or you want add this "/test/2/3" - then it will be localhost:3000/test/2/3.

navigate("questionare/2") - leads me into /questionaire/1/questionaire/2

as i said if you have just string and before it you didnt add /, then its just added after your current path.

Thanks for the explanation, it makes sense, I was a bit aware of what you described but my doubt really was in the second part of my question, how do I make it work as intended

arthurg · Accepted Answer · 2022-04-30 12:08:46Z

Answering you second question:

How do I make an increment so every question just adds ++ How do I go from questionaire/5 into questionaire/2 using navigate?

navigate("questionare/2") - leads me into /questionaire/1/questionaire/2

You can do this using absolute path (e.g: '/questionaire/2') or relative path (e.g: '2'), you can either do this using a Link or programmatically using a useNavigate hook.

const navigate = useNavigate() const handleClick = () => { navigate('2') //or navigate('/questionaire/2') }

Your current code is using relative path + adding entire path, which leads to duplicated path as you mentioned.

Collectives™ on Stack Overflow

React Router Navigate pathing

3 Answers 3

1 Comment

2 Comments

Comments

Linked

Hot Network Questions