如何在React Redux-Toolkit中获取URL的路径参数？

问题原因 #

useParams()是React Router提供的Hook，只能在React组件或自定义Hook的渲染周期内调用，而createAsyncThunk属于Redux的异步逻辑函数，不在React组件渲染流程中，直接调用Hook会违反React的Hook规则，导致失效甚至报错。

正确解决方案：从调用方传入路径参数 #

在组件中获取路径参数，再将参数传递给createAsyncThunk，是最直接且符合规则的做法：

1. 修改createAsyncThunk的定义

调整thunk的参数类型，接收外部传入的路径参数：

export const getArticleTitle = createAsyncThunk<
  ArticleData[],
  string, // 将void改为参数类型，这里对应路径参数title的类型
  { rejectValue: AxiosError }
>("article/fetchAllArticle", async (title, { rejectWithValue }) => {
  try {
    const newsid = title.split("-").join(" ");
    const response = await artikelService.getArtikelIni(newsid);
    return response as ArticleData[];
  } catch (error) {
    if (error instanceof AxiosError) {
      return rejectWithValue(error);
    }
    throw error;
  }
});

2. 在React组件中调用dispatch并传入参数

在可以访问useParams()的组件里，获取路径参数后再触发thunk：

import { useDispatch } from 'react-redux';
import { useParams } from 'react-router-dom';
import { useEffect } from 'react';
import { getArticleTitle } from './your-slice-file';

function ArticleDetail() {
  const dispatch = useDispatch();
  const { title } = useParams<{ title: string }>();

  // 组件挂载时触发请求
  useEffect(() => {
    if (title) {
      dispatch(getArticleTitle(title));
    }
  }, [dispatch, title]);

  // 后续渲染逻辑...
}

额外注意事项 #

• 确保路径参数title存在后再调用thunk，避免传入undefined导致后续逻辑出错；
• 如果需要在多个组件中复用参数传递逻辑，可以封装成自定义Hook，比如useFetchArticle()，在Hook内部同时处理useParams和dispatch。

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