React嵌套路由中Sale组件不显示及参数获取问题求助

你的Sale组件无法显示、点击跳转无反应，核心原因是路由结构错误和链接路径不规范，以下是具体修复步骤，同时确保Sale组件能正确获取图书title和id：

1. 修复App.js的路由嵌套错误 #

你的/dashboard路由和books路由未正确嵌套在<Routes>标签内，这会导致路由匹配失效，修正后的路由结构如下：

// App.js 修正后代码
<Routes>
  <Route path="/" element={<Navigate to="/login" replace />} />
  <Route path="/login" element={<Login />} />
  <Route path="/dashboard" element={<Layout component={Dashboard} />} />
  {/* 将books路由移入Routes内部，与dashboard同级 */}
  <Route path="/books">
    <Route index element={<Layout component={Dashboard} />} />
    <Route path=":title/:id">
      <Route index element={<Layout component={BookDetail} />} />
      <Route path="sale" element={<Layout component={SaleStore} />} />
    </Route>
  </Route>
</Routes>

2. 修正Dashboard中的Link路径 #

当前Dashboard里的Link路径是相对路径，但如果Dashboard是从/dashboard路由访问的，必须使用绝对路径才能正确跳转到/books/:title/:id：

// Dashboard 中Link修正
<Link to={`/books/${book.title}/${book.id}`}>
  <button type="submit" className="btn custome-btn purple-active-ghost w-100">
    {book.title}
  </button>
</Link>

注意：如果book.title包含斜杠等特殊字符，会破坏路由结构，建议用encodeURIComponent编码：to={/books/${encodeURIComponent(book.title)}/${book.id}}，在组件中用decodeURIComponent(title)解码。

3. 让SaleStore组件获取路由参数 #

在SaleStore组件中，通过useParams()直接提取title和id：

// SaleStore.js 核心代码
import { useParams } from 'react-router-dom';

const SaleStore = () => {
  const { title, id } = useParams();
  // 若之前做了编码，需解码
  // const decodedTitle = decodeURIComponent(title);
  
  console.log("图书标题:", title);
  console.log("图书ID:", id);
  
  // 组件其他逻辑
  return (
    // 组件内容
  );
};

export default SaleStore;

4. 检查Layout组件的渲染逻辑 #

确保你的Layout组件正确渲染传入的子组件，示例实现如下：

// Layout.js 示例代码
const Layout = ({ component: Component }) => {
  return (
    <div className="layout-container">
      {/* 布局头部、侧边栏等固定内容 */}
      <Component />
      {/* 布局底部 */}
    </div>
  );
};

export default Layout;

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