react 详情页的处理，地址记录条件，搭配路由完成

最新推荐文章于 2025-07-07 08:16:49 发布

watts_j

最新推荐文章于 2025-07-07 08:16:49 发布

阅读量931

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react umi 详情 url

本文链接：https://blog.youkuaiyun.com/qq_33559093/article/details/88301217

React 专栏收录该内容

12 篇文章

订阅专栏

本文介绍在React应用中如何使用动态路由监听并获取URL参数，以实现如商品详情、交易详情等页面的数据请求。具体讲解了umi框架下动态路由的配置方法，以及如何利用path-to-regexp包从URL中解析出所需参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们经常通过一个地址打开一个详情的页面，比如：商品详情、交易详情

通常是GET请求，然后地址后面衔接了特定的条件字段，如：

问号之后则是我们需要的信息，如何只需要某一个字段，比如：id...

我们也可以这样：

这个874是id的值。

然后是react当中如何实现，思路大体如下：

对system/message/:id 这个动态的路由进行监听

进入监听，则获取到id，然后组装请求，发送...

我用的是umi的约定式路由

如何你用的配置式的路由则在后面手动加一下就行（这个有点o(ﾟДﾟ)っ！）

ok,看代码吧

其中有个pathMatchRegexp方法，用的是path-to-regexp这个包，作用是获取地址当中的数据


export default {
  namespace: 'newsDetails',

  state: {
    newsDetail: {}
  },

  subscriptions: {
    setup({ dispatch, history }) {
      return history.listen(({ pathname, query }) => {
        const match = pathMatchRegexp('/system/message/:id', pathname)
        if (match) {
          dispatch({ type: 'detail', payload: match[1] })
        }
      })
    },
  },

  effects: {
    * detail({ payload }, { call, put }) {
      const data = yield call(http, seeMessage(payload));
      if (data) {
        yield put({
          type: 'querySuccess',
          payload: data,
        })
      }
    }
  },

  reducers: {
    querySuccess(state, { payload }) {
      return {
        ...state,
      newsDetail: payload
      }
    }
  }
}