React点击li标签跳转路由并传递suggestion.id到InnerDetail组件的问题

1. 修改路由配置（path.js） #

要支持携带id参数，把原来的Route改成带参数占位符的形式：
如果是react-router v5版本：

<Route path="/detiled/:id">
  <InnerDetail />
</Route>

如果是react-router v6版本：

<Route path="/detiled/:id" element={<InnerDetail />} />

如果不需要把id暴露在地址栏，也可以用state隐式传参，路由不需要改占位符，保持原来的path="/detiled"即可

2. 修正搜索组件的Link传参写法 #

你代码里写的<Link to={/detiled/${suggestion.id}}>已经是正确的路径拼接写法，不需要额外加onClick跳转逻辑，Link组件本身就支持点击跳转。如果需要额外执行finddoctor逻辑，把原来的onClick改成箭头函数避免渲染时直接执行：

<Link to={`/detiled/${suggestion.id}`}>
  <li
    style={styles.listyle}
    key={index}
    className={classname}
    onClick={() => finddoctor(suggestion.id)}
  >
    {suggestion.firstname}
  </li>
</Link>

如果用隐式state传参，Link写法改成：

<Link 
  to={{
    pathname: "/detiled",
    state: { id: suggestion.id }
  }}
>

3. 在详情页获取id参数 #

方式1：路由参数获取（对应路径带id的写法） #

从react-router-dom引入useParams钩子直接取参数：

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

export default function Detail(props) {
  const { id } = useParams(); // 这里的id和路由占位符:id对应
  const [data3, setdata3] = useState({}); // 建议用对象存单条详情，不要用数组
  const config = {
    headers: {
      Authorization: `token ` + localStorage.getItem("token"),
    },
  };

  useEffect(() => {
    // 拿到id后请求接口
    axios.get(`doctor-filter/?id=${id}`, config)
      .then((res) => {
        setdata3(res.data);
      });
  }, [id]); // 加id作为依赖，只有id变化时才重新请求
  // 剩下的原有逻辑不变
}

方式2：state隐式传参获取（对应不暴露id在地址栏的写法） #

用useLocation拿state里的参数：

import { useLocation } from "react-router-dom";

export default function Detail(props) {
  const location = useLocation();
  const id = location.state?.id;
  // 后面请求逻辑和方式1一致
}

其他注意点 #

• 你原来的useEffect没有加依赖项，会导致组件每次更新都重复发请求，必须加上依赖项
• 详情数据建议用对象存储，你原来初始化用数组，渲染的时候拿属性会报错，初始化改成空对象即可
• 你原来用window.location.pathname拆分路径的方式兼容性差，用react-router提供的钩子更可靠

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