React路由优化咨询：百万书籍场景下的路由处理方案

问题场景 #

我正在开发一个带有多页面的书店React应用，用户点击特定书籍时会跳转到包含作者介绍及购买按钮的详情页。当前我的路由配置中为单本书籍写了固定路由（如/sea、/upgrade），但如果应用中有数百万本书籍，显然不可能配置数百万条路由，所有书籍数据均来自外部API。

解决方案：使用动态路由参数 #

不需要为每本书单独配置路由，React Router的动态路由参数可以完美解决这个问题，步骤如下：

1. 配置动态路由规则 #

替换原有的单个书籍路由，添加一条带动态参数的路由：

<Routes>
  {/* 其他原有路由保持不变 */}
  {/* DASHBOARD */}
  <Route path="/" element={<Home />} />
  <Route path="/home" element={<Home />} />
  {/* PAGES */}
  <Route path="/books" element={<Books />} />
  <Route path="/authors" element={<Authors />} />
  <Route path="/foryou" element={<Foryou />} />
  <Route path="/bestsellers" element={<Bestsellers />} />
  <Route path="/top100" element={<Top100 />} />
  <Route path="/userProfile" element={<UserProfile />} />
  {/* CATEGORIES */}
  <Route path="/hardscifi" element={<Hardscifi />} />
  <Route path="/cyberpunk" element={<Cyberpunk />} />
  <Route path="/spaceopera" element={<Spaceopera />} />
  <Route path="/steampunk" element={<SteamPunk />} />
  <Route path="/androidsrobots" element={<AndroidsRobots />} />
  {/* 替换为动态书籍详情路由 */}
  <Route path="/books/:bookId" element={<BookDetails />} />
  {/* 可选：添加404页面路由 */}
  <Route path="*" element={<NotFound />} />
</Routes>

这里的:bookId是动态参数，会匹配URL中/books/之后的任意字符串/数字，比如/books/123、/books/the-old-man-and-the-sea。

2. 在详情组件中获取参数并请求数据 #

创建BookDetails组件，使用useParams钩子获取路由中的bookId，再调用API获取对应书籍的详情：

import { useParams } from 'react-router-dom';
import { useState, useEffect } from 'react';

function BookDetails() {
  const { bookId } = useParams();
  const [book, setBook] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchBookDetails = async () => {
      try {
        const res = await fetch(`https://your-api-domain/books/${bookId}`);
        if (!res.ok) throw new Error('书籍不存在或获取失败');
        const data = await res.json();
        setBook(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchBookDetails();
  }, [bookId]);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误：{error}</div>;
  if (!book) return <div>未找到该书籍</div>;

  return (
    <div className="book-details">
      <h1>{book.title}</h1>
      <div className="author-section">
        <h3>作者介绍</h3>
        <p>{book.author.bio}</p>
      </div>
      <p className="book-description">{book.description}</p>
      <button className="buy-button">立即购买</button>
    </div>
  );
}

export default BookDetails;

3. 在列表页生成动态跳转链接 #

在书籍列表组件（如Books）中，给每本书添加指向动态路由的Link：

import { Link } from 'react-router-dom';
import { useState, useEffect } from 'react';

function Books() {
  const [books, setBooks] = useState([]);

  useEffect(() => {
    fetch('https://your-api-domain/books')
      .then(res => res.json())
      .then(data => setBooks(data))
      .catch(err => console.error('获取书籍列表失败:', err));
  }, []);

  return (
    <div className="book-list">
      {books.map(book => (
        <div key={book.id} className="book-card">
          <Link to={`/books/${book.id}`}>
            <h3>{book.title}</h3>
            <img src={book.coverUrl} alt={`${book.title} 封面`} />
          </Link>
          <p>作者：{book.author.name}</p>
        </div>
      ))}
    </div>
  );
}

export default Books;

额外优化：使用Slug生成友好URL #

如果希望URL更友好（比如/books/the-old-man-and-the-sea而不是/books/123），可以让API返回书籍的slug字段，然后将动态路由改为/books/:bookSlug，在BookDetails中通过slug查询书籍即可，代码逻辑和上述一致，只需替换参数名和API请求路径。

内容的提问来源于stack exchange，提问作者andrea siano