React Dom Routes 未按預期工作，更改路徑但頁面上沒有任何內容

Question

我正在制作一個使用 OpenLibrary API 的網絡平台，我正在從主題中提取數據，然后當您單擊主題中的一本書時，我想被帶到一個名為“Book”的頁面，在那里我顯示數據。 現在我已經設置了我的路線（我認為它們是正確的），但是當我單擊列表中的一項時，它什么也沒做，它會將 URL 更改為我設置的路線，但它沒有不要帶我到顯示數據的 Book 組件。 現在，我還沒有發布我的 Book.js 文件，因為它只是包含測試代碼以查看我是否可以訪問該組件。 任何幫助將不勝感激！

以下是我的一些代碼片段：

應用程序.js：

import React, { useState, useEffect } from "react";
import axios from "axios";

import Works from "./components/Works";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";

import "./styles.css";

function App() {
  const [subjects, setSubjects] = useState([]);
  const [worksDetails, setWorkDetails] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const url = "https://openlibrary.org/subjects/animals.json?limit=10";
  useEffect(() => {
    axios
      .get(url)
      .then((response) => {
        setSubjects(response.data);
        setWorkDetails(response.data.works);
        setIsLoading(true);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  if (!isLoading) {
    return <p>Loading...</p>;
  } else {
    return (
      <>
        <Navbar />
        <div className="contentHeader">
          <h1 className="subjectHeader" style={{ padding: "10px" }}>
            Subject: {subjects.name.toUpperCase()}
          </h1>
          <h1 className="workHeader" style={{ padding: "10px" }}>
            Work Count: {subjects.work_count.toLocaleString()}
          </h1>
        </div>
        <div>
          <Works works={worksDetails} />
        </div>
        <Footer />
      </>
    );
  }
}
export default App;

Works.js

import React from "react";
import { Link } from "react-router-dom";
import Book from "../routes/Book";

const Works = (props) => {
  return (
    <div className="container">
      <div>
        <div className="heading">
          {props.works.map((work) => {
            return (
              <Link to={`/book/${work.key}`} element={<Book />} key={work.key}>
                <ul>{work.title}</ul>
              </Link>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default Works;

索引.js

import { createRoot } from "react-dom/client";
import "./index.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import App from "./App";
import Book from "./routes/Book";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <BrowserRouter>
    <Routes>
      <Route path="*" element={<App />} />
      <Route path="/book" element={<Book />}>
        <Route path=":bookId" element={<Book />} />
      </Route>
    </Routes>
  </BrowserRouter>
);

Answer 1

問題

當你使用

<Route path="/book" element={<Book />}>
  <Route path=":bookId" element={<Book />} />
</Route>

Route組件期望Book為嵌套的Route組件呈現一個Outlet組件。 不過，這似乎不是您想要的用戶體驗。 外部路由已匹配並渲染，但由於沒有出口，因此根本不會渲染您想要使用參數的實際Book組件的內部路由。

事實證明，在獲取的數據中， work.key不僅僅是一個 id，而是一個嵌套的路由值，例如"key": "/works/OL138052W" ，所以 UI 正在計算一個格式錯誤的路由（ "/book//works/OL138052W" )並鏈接到不存在的路線。

解決方案

to={`/book${work.key}`}是您要鏈接的路徑，請注意刪除“book”和注入的work.key值之間的"/" ：

<Link key={work.key} to={`/book${work.key}`}>
  <ul>{work.title}</ul>
</Link>

然后應該呈現以下內容之一：

<Route path="/book/works/:bookId" element={<Book />} />

或者

<Route path="/book/works">
  <Route path=":bookId" element={<Book />} /> // "/book/works/:bookId"
</Route>

如果您不想弄亂這個work.key值，那么您可能需要選擇其他屬性之一，只要它們為識別目的提供足夠的唯一性。

Answer 2

我相信你的路線應該是這樣的：

<Route path="/book/:bookId" element={<Book />}>