我正在制作一個使用 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>
);

uj5u.com熱心網友回復：

問題

當你使用

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

該Route組件期望為嵌套組件Book呈現一個組件。不過，這似乎不是您想要的用戶體驗。外部路由被匹配和渲染，但是因為沒有出口，內部路由渲染你想要的實際組件與引數根本沒有渲染。OutletRoute Book

事實證明，在獲取的資料中，work.key它不僅是一個 id，而且似乎是一個嵌套的路由值，即類似于"key": "/works/OL138052W"，因此 UI 正在計算一個格式錯誤的路由 ( "/book//works/OL138052W")并鏈接到一個不存在的路由。

解決方案

to={`/book${work.key}`}是您鏈接到的路徑，請注意洗掉"/"“書”和注入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值，那么您可能需要選擇其他屬性之一，只要它們為識別目的提供足夠的唯一性。

uj5u.com熱心網友回復：

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

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

標籤：javascript 反应 反应路由器dom

上一篇：我不知道如何限制呼叫函式之間的時間

下一篇：如何在JavaScript中的一個函式中顯示每個按鈕