一、url param传参

url 中的参数称为 url param

以链接 http://localhost:3000/?id=1#/game/detail 为例， ?id=1 就是 url 中的参数部分

注意：

hash路由中，url param 在 # 之前；# 之后为hash部分

hash部分不会传给服务端，是仅前端使用的内容，故服务端通常无法处理

1.1 获取 url param

通过 window.location.search 可以拿到 url param 字符串部分

注意：

window.location.search 包含 ?

 

1.2 解析 url param

将 url param 解析为 key-value 对象

强烈推荐 qs 库！

qs.parse(window.location.search, { ignoreQueryPrefix: true })

完事！

 

如果要自己截取，先不说包含数组、对象的请况，就常规情况：

const getUrlParamObj = () => {
  const paramObj = {};


  // 获取到 hash路由 (#)前的部分
  const url = window.location.href.split("#")[0];
  // 获取到 url param (?后，此处未包含?)部分
  const urlParam = url.split("?")[1];
  
  if(urlParam) {
    const params = urlParam.split("&");  // url param 中的多个参数由 & 分隔
    params.forEach((param) => {
      const pair = param.split("=");
      paramObj[pair[0]] = pair[1];
    });
  }
  
  return paramObj
}

二、 react-router 路由间传参

react-router 提供了应用不同路由间跳转的方式：

history.push（可返回的跳转） 、history.replace（不可返回的跳转）、 history.goBack（返回）

也提供了2种传参方式

2.1 显式传参

显式传参的参数也放在 url 中，不过使用的不是 url param ，而是在定义路由时，指定了参数的位置和名字

定义路由时， path 需包含支持的参数：

<Route path={'/game/:id'} component={Game} />

:id 的名字可以任意取，:gameId 也行。该名字也是之后读取参数时使用的名字

跳转时，将 :id 替换为值即可：

history.push('/game/1');

页面使用参数：

const id = match.params.id  // 注意：拿到的是字符串

2.1 隐式传参

隐式传参的参数，在 url 中不可见

跳转时：

history.push({
  pathname: `/game`,
  state: {
    id: 1,
  },
});

使用参数：

const routeState = location.state;