React嵌套路由组件不显示及路由跳转异常问题咨询

问题描述 #

1. 想在BookDetails组件中显示对应书籍的标题，URL格式保持/sale/:bookId即可，不需要把标题放在URL里；
2. 点击BookDetails里的跳转链接后，URL变成了/sale/:bookId/salebooks，但页面还是显示BookDetails，没切换到SaleBooks组件。

解决方案 #

问题1：在BookDetails中显示书籍标题

通过react-router-dom的useParams钩子获取URL中的bookId参数，再根据bookId从你的数据源（比如状态管理库、接口返回数据）里拿到对应书籍的信息，就能渲染标题了。

示例代码：

import { useParams } from 'react-router-dom';

function BookDetails() {
  const { bookId } = useParams();
  // 替换成你实际获取书籍信息的逻辑
  const book = fetchBookById(bookId); 

  return (
    <div>
      {/* 拿到书籍数据后渲染标题 */}
      {book && <h2>{book.title}</h2>}
      {/* 下面要加Outlet，解决嵌套路由的问题 */}
      <Outlet />
    </div>
  );
}

问题2：嵌套路由不渲染子组件的修复

你的路由配置有两个错误，修正后就能正常切换组件：

1. 嵌套子路由的path要用相对路径，不需要重复父路由的/sale前缀；
2. 父路由组件BookDetails里必须添加<Outlet />，用来渲染匹配到的子路由组件。

修正后的路由代码：

import { Routes, Route, Navigate } from 'react-router-dom';

<Routes>
  <Route path="/" element={<Navigate to="/login" replace />} />
  <Route path="/login" element={<Login />} />
  <Route path="/dashboard" element={<Layout component={Dashboard} />} />
  <Route path="/sale" element={<BookDetails />}>
    {/* 子路由用相对路径，省略/sale前缀 */}
    <Route path=":bookId" element={<Layout component={BookDetails} />} />
    <Route path=":bookId/salebooks" element={<Layout component={SaleBooks} />} />
    <Route path=":bookId/viewbooks" element={<Layout component={ViewBooks} />} />
  </Route>
  <Route path="*" element={<NotFound />} />
</Routes>

同时，优化跳转链接的写法：

• Dashboard里的链接不用同时写<Link>和navigate，<Link>本身就能处理跳转，还能避免额外的跳转逻辑：

<Link to={`/sale/${book.id}`}>
  <button type="button" className="btn custome-btn purple-active-ghost w-100">
    {book.title}
  </button>
</Link>

（把type="submit"改成type="button"，防止误触表单提交）

• BookDetails里的跳转链接可以用相对路径，更简洁：

<Link to="salebooks">
  <button type="button" className="btn custome-btn purple-active-ghost w-100">
    go to salebooks 
  </button>
</Link>

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