React Router 导航路径

Question

我想更好地了解 useNavigate 的工作原理，因为我并不真正了解该模式。

这是我的路线

<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>

在问卷调查页面上，我使用 navigate("1") 并进入路径 "/questionaire/1" - 不错！

关于问题 1，我想进入 "/questionaire/2":

navigate("2") - 引导我进入 /questionaire/1/2
navigate("/2") - 引导我进入 /2
navigate("questionare/2") - 引导我进入 /questionaire/1/questionaire/2

我如何进行增量以便每个问题都只添加 ++ 如何使用导航从 questionaire/5 进入 questionaire/2？

我正在使用导航按钮，我应该使用 LINK 吗？嵌套了一个按钮？为什么？

编辑：不一定要增加值，只需将当前数字替换为我想要的数字 - 例如 question/1 到 question/2 或从 question/5 到 question/3

Answer 1

据我所知。（我是菜鸟）

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

当您只使用数字或字符串时，useNav 只需在当前路径后添加 / 即可。如果你而不是数字 2 写 'hi' 它会导航到 /hi.

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

因为你写的是绝对路径，如果你在useNav中你的字符串前加上“/”，那么它的意思是“你的主机”+“你的字符串”。例子：您的房东是 localhost:3000。如果您在 useNav 中输入“/test”，它将是 localhost:3000/test。或者你想添加这个“/test/2/3” - 那么它将是 localhost:3000/test/2/3.

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

正如我所说，如果你只有字符串，而在它之前你没有添加 /，那么它只是添加在你当前路径之后。

Answer 2

回答你第二个问题：

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

您可以使用绝对路径（例如：'/questionaire/2'）或相对路径（例如：'2'）执行此操作，您可以使用 Link 或以编程方式使用使用导航挂钩。

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

您当前的代码使用的是相对路径+添加整个路径，这会导致您提到的重复路径。

Answer 3

你问的是绝对路由和相对路由的根本区别。在 react-router-dom@6 中，仅区分相对链接和路由与绝对链接和路由的是前导 "/" 字符。

绝对链接和路由：
- 以 "/" 字符开头，即 "/root/segment1/segment2"
- 替换整个路径
```
// "/root/segment1"
navigate("/root/otherPath");
// "/root/otherPage"
```

相关链接和路线：

不要以前导 "/" 字符开头，即 "segment2"

附加到当前路径

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

...

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

我建议进行以下路由重构：

所有同级路由都可以由单个 Routes 组件包装和呈现。
使用布局和索引路由来帮助 manage/organize 嵌套路由。

代码

<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>

使用绝对路径导航到父路径或从一个问题导航到另一个问题：

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

在path="/questionaire"上使用父布局路由的相对路径：

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

注意这里我们可以使用".."相对于父路由导航。这对于沿同级组件导航很有用。

React Router 导航路径

React Router Navigate pathing

reactjs

react-router