如何通过React路由将URL动态段传递给子组件Props

开发者阿泽

2026-7-30

解决方案：让Book组件同时支持URL参数和主动传参

你可以通过以下两种方案，既满足路由动态参数传递，又保留组件独立传参的灵活性：

方案1：组件内部兼容两种传参方式

让Book组件优先使用传入的bookId属性，当没有传入时再从URL参数中获取。这样组件既可以在路由中自动获取URL参数，也能在其他场景下手动指定bookId：

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

export default function Book({ bookId: propBookId }) {
  // 从URL参数中获取id
  const { bookId: paramsBookId } = useParams();
  // 优先使用传入的属性，没有则用URL参数
  const bookId = propBookId ?? paramsBookId;

  if (!bookId) {
    // 处理id不存在的情况，比如显示错误页或返回空
    return <div>未找到书籍ID</div>;
  }

  // 后续业务逻辑使用bookId即可
  return <div>书籍ID：{bookId}</div>;
}

用法：

路由中使用（自动取URL参数）：

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

其他组件中手动传参：

// 比如在某个列表组件里
<Book bookId="123" />

方案2：分离路由逻辑与业务组件

把路由相关的参数提取逻辑拆成一个专门的路由组件，让原始的Book组件只负责接收bookId属性，完全不依赖路由。这种方式更符合单一职责原则，Book组件的复用性更强：

// 纯业务组件：Book.js
export function Book({ bookId }) {
  if (!bookId) {
    return <div>未找到书籍ID</div>;
  }
  return <div>书籍ID：{bookId}</div>;
}

// 路由适配组件：BookRoute.js
import { useParams } from 'react-router-dom';
import { Book } from './Book';

export default function BookRoute() {
  const { id } = useParams();
  // 将URL参数转换为Book组件需要的属性
  return <Book bookId={id} />;
}

// 路由配置
<Routes>
  <Route path="/books/:id" element={<BookRoute />} />
</Routes>