React技术问题：通过NavLink从父组件传递整数至子组件并获取

我来帮你搞定这个需求！要实现从父组件（比如头部组件）通过NavLink传递整数到子组件并使用，咱们分3步走：

1. 先配置带动态参数的路由 #

首先得在你的路由配置里定义好接收参数的路径，用:参数名的格式声明动态参数，这样路由才能识别URL里的整数：

// 路由配置文件（比如App.js或Routes.js）
import { Routes, Route } from 'react-router-dom';
import ChildComponent from './ChildComponent'; // 导入你的子组件

function App() {
  return (
    <Routes>
      {/* 这里的:id就是我们要传递的整数参数，名字可以自定义，比如comicId */}
      <Route path="/head/:id" element={<ChildComponent />} />
    </Routes>
  );
}

2. 父组件中用NavLink传递整数 #

你原来的写法已经没问题了，不过可以把整数抽成变量，方便后续修改或者从状态/ props里动态获取：

// 父组件（比如Header组件）
import { NavLink } from 'react-router-dom';

function Header() {
  // 可以是固定整数，也可以是从状态或props拿到的动态值
  const targetId = 1;
  return (
    <button className='rounded-corner-btn'>
      Comics<br/>
      {/* 用模板字符串拼接路由，把整数传递进去 */}
      <NavLink to={`/head/${targetId}`}>查看详情</NavLink>
    </button>
  );
}

3. 子组件中获取并转换整数参数 #

注意！URL里的参数默认都是字符串类型，所以我们需要把它转换成整数再使用。用react-router-dom提供的useParams钩子就能轻松拿到参数：

// 子组件（ChildComponent.js）
import { useParams } from 'react-router-dom';

function ChildComponent() {
  // 从路由参数中取出id
  const { id } = useParams();
  // 把字符串转成十进制整数，第二个参数10一定要加，避免进制错误
  const numericId = parseInt(id, 10);

  // 现在就可以用numericId来渲染其他组件或者做业务逻辑了
  return (
    <div>
      <h3>传递过来的整数ID：{numericId}</h3>
      {/* 比如根据这个ID渲染对应的内容组件 */}
      {/* <DetailComponent id={numericId} /> */}
    </div>
  );
}

export default ChildComponent;

额外注意点 #

• 如果参数可能为空或者非数字，可以加个容错处理：const numericId = id ? parseInt(id, 10) : 0;
• 如果你用的是react-router-dom v5，路由配置写法略有不同，但useParams的用法是一样的，不用担心版本差异

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