雷达智富

首页 > 内容 > 程序笔记 > 正文

程序笔记

React获取url参数的几种方法

2024-08-31 74

在React中获取URL参数的方法有以下几种:

使用window.location.search

const searchParams = new URLSearchParams(window.location.search);
const id = searchParams.get('id');

使用react-router-dom

如果使用了react-router-dom路由库,则可以使用useParams钩子来获取URL参数。例如,如果的URL路径为/users/:id,可以像这样获取id参数:

import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  return <div>{id}</div>;
}

使用query-string库

可以使用query-string库来解析URL查询参数。

import queryString from 'query-string';

const values = queryString.parse(window.location.search);
const id = values.id;

无论选择哪种方法,都应该首先确保在访问参数之前进行参数存在性检查,以避免潜在的错误。

更新于:2个月前
赞一波!

文章评论

评论问答