React 路由器 v6：更新鏈接中的 url 參數

Question

我正在學習 React，我正面臨一些我不了解 Link 組件的事情。

我正在使用兩個鏈接到上一個和下一個問題的按鈕進行簡單調查。 這是我的應用程序的架構：

ReactDOM.render(
   <React.StrictMode>
      <BrowserRouter>
         <Header />
         <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/survey/:questionNumber" element={<Survey />} />
            <Route path="/results" element={<Results />} />
            <Route path="*" element={<Error />} />
         </Routes>
      </BrowserRouter>
   </React.StrictMode>,
   document.getElementById("root")
);

我的組件 Survey 如下所示：

import { useParams, Link } from "react-router-dom";

function Survey() {
   const { questionNumber } = useParams();
   let questionNumberInt = Number(questionNumber);

   const prevQuestionNumber =
      questionNumberInt === 1 ? null : questionNumberInt - 1;
   const nextQuestionNumber = questionNumberInt + 1;

   return (
      <div>
         <h1>Questionnaire 🧮</h1>
         <h2>Question {questionNumber} </h2>

         {questionNumberInt === 1 ? null : (
            <Link to={prevQuestionNumber}>Précédent</Link>
         )}

         {questionNumberInt === 10 ? (
            <Link to="/results">Résultats</Link>
         ) : (
            <Link to={nextQuestionNumber}>Suivant</Link>
         )}
      </div>
   );
}

export default Survey;

通過這段代碼，我可以觀察到（假設我們當前位於頁面“/survey/2”）

<Link to={prevQuestionNumber}>Précédent</Link>

在HTML文件中轉化為

<a href="/survey/2">Précédent</a>

（與下一個鏈接相同，它指的是“/survey/2”）。 因此，無論出於何種原因，我的鏈接都無法正常工作。

我發現我可以通過寫作來讓它工作

<Link to={'/survey/${prevQuestionNumber}'}>Précédent</Link>

然后我實際上獲得了指向“/survey/1”和“/survey/3”的 prev 和 next 鏈接。

但是我很煩不得不寫完整的 url，因為 react router v6 引入了相對路由，所以我想使用它。 事實上，我發現如果我寫

<a href={prevQuestionNumber}>Précédent</a>

直接在我的代碼中，而不是使用Link ，然后它就可以完美地工作，並且在單擊我的上一個和下一個鏈接時我被正確重定向。

所以我不知道如何使用Link重新創建它以及為什么<Link to={prevQuestionNumber}>Précédent</Link>不起作用，有人可以解釋一下嗎？

Answer 1

嘿，歡迎來到 Stack Overflow，

所以下面的代碼有效的原因

<Link to={'/survey/${prevQuestionNumber}'}>Précédent</Link>

如果你看到你的路線，你只有一條路線接受動態路徑，那就是

<Route path="/survey/:questionNumber" element={<Survey />} />

另一方面，當您嘗試<Link to={prevQuestionNumber}>Précédent</Link>時，它不會在路由中找到相關路徑並給出錯誤頁面或沒有頁面或空白頁面。