如何在Context Provider中更优雅地获取useParams返回的路由参数？

方案1：Provider内直接调用useParams（适用react-router v6+） #

这是最简洁的实现方式，不需要额外维护状态做参数同步，直接在Provider内部调用路由hook获取参数即可：

1. 修改ShowDetailsContext代码 #

import { createContext, useContext } from "react";
import { useParams } from "react-router-dom";

const ShowDetailsContext = createContext();

const ShowDetailsProvider = ({ children }) => {
  // 直接从当前匹配路由中获取id参数，不需要额外维护state
  const { id: idSerie } = useParams();
  console.log(idSerie);

  return <ShowDetailsContext.Provider value={{ idSerie }}>{children}</ShowDetailsContext.Provider>;
};

// 封装自定义hook简化上下文调用
const useShowDetails = () => useContext(ShowDetailsContext);

export { ShowDetailsProvider, useShowDetails };

2. 修改ShowDetails代码 #

不需要再做参数获取和状态更新的中转逻辑，直接调用自定义hook拿取参数即可：

import React from "react";
import { useShowDetails } from "../context/ShowDetailsContext";

const ShowDetails = () => {
  const { idSerie } = useShowDetails();
  // 直接使用idSerie做业务逻辑即可

  return (
    <>
      <p>show detail page，当前剧集id：{idSerie}</p>
    </>
  );
};

export default ShowDetails;

3. v6版本路由可以调整为嵌套写法统一管理需要上下文的路由 #

app.js代码调整如下：

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

<Routes>
  <Route path="/discover" element={<Discover />} />
  {/* 所有需要ShowDetailsContext的路由都可以作为子路由放在下面 */}
  <Route element={<ShowDetailsProvider />}>
    <Route exact path="/show/:id" element={<ShowDetails />} />
    <Route exact path="/show/episode/:id" element={<ShowEpisode />} />
  </Route>
</Routes>

方案2：兼容react-router v5的写法 #

如果使用v5版本的react-router，Provider在Route外层无法直接获取params，可以通过render属性把参数传递给Provider：

1. 修改app.js代码 #

<Route exact path="/show/:id" render={({ match }) => (
  <ShowDetailsProvider idSerie={match.params.id}>
    <ShowDetails />
  </ShowDetailsProvider>
)} />
<Route exact path="/show/episode/:id" render={({ match }) => (
  <ShowDetailsProvider idSerie={match.params.id}>
    <ShowEpisode />
  </ShowDetailsProvider>
)} />

2. 修改ShowDetailsContext代码 #

import { createContext, useContext } from "react";

const ShowDetailsContext = createContext();

const ShowDetailsProvider = ({ children, idSerie }) => {
  console.log(idSerie);
  return <ShowDetailsContext.Provider value={{ idSerie }}>{children}</ShowDetailsContext.Provider>;
};

const useShowDetails = () => useContext(ShowDetailsContext);

export { ShowDetailsProvider, useShowDetails };

方案优势 #

• 无冗余的状态同步逻辑，避免手动更新状态导致的遗漏、重复渲染问题
• 代码量更少，逻辑链路更短，路由参数直接从路由层获取，不需要业务组件中转
• 数据流向清晰，Provider直接消费路由参数，不需要反向回调更新状态

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