[react] React-Router怎么获取URL的参数？

[haizhilin2013]

[react] React-Router怎么获取URL的参数？

[sin7777]

在之前的版本中，可以通过 this.props.location.query.bar 进行获取

在 v4 中，通过 this.props.location.search 获取，不过需要进行处理

[wesweet]

V4版本提供了useParams钩子函数，可以获取到url参数

[NieShiyi]

路由传值的几种方式

1.get传值

路由配置还是普通的配置，如：'admin'

传参方式如：'admin?id='1111''

通过this.props.location.search获取url获取到一个字符串'?id='1111'

我们可以用url，qs，querystring，浏览器提供的api URLSearchParams对象（do not need to support IE and do not contain array or object）或者自己封装的方法去解析出id的值。

2.动态路由传值

路由需要配置成动态路由：如path='/admin/:id'

传参方式，如'admin/111'

通过this.props.match.params.id 取得url中的动态路由id部分的值，除此之外还可以通过useParams（Hooks）来获取

3.通过query或state传值

传参方式如：在Link组件的to属性中可以传递对象{pathname:'/admin',query:'111',state:'111'};

通过this.props.location.state或this.props.location.query来获取即可，传递的参数可以是对象、数组等，但是存在缺点就是一刷新页面，参数就会丢失

[vkboo]

• 通过params
  • 类组件：在保证props能获取到路由信息的前提下（如果不是直接嵌套在<Route/>下，需要使用withRouter的HOC），通过this.props.match.params获取
  • 函数式组件：const params = useParams();
• 通过search,demo如下：

  // query传参
  this.props.history.push({
  pathname: 'list',
  search: qs.stringify({
      a: 123,
  }),
  })
  // 取值
  import qs from 'qs';
  // 类组件中取值
  const paramStr = this.props.location.search.slice(1);
  qs.parse(paramStr); // {a: '123'}
  // 在函数式组件中取值
  const location = useLocation();
  const paramStr = location.search.slice(1);
  qs.parse(paramStr); // {a: '123'}

[MayRain1999]

function useSearchParams(id) { const query = new URLSearchParams(useLocation().search); return query.get(id); }

// 使用 useSearchParams('id');