获取 url 表单提交的参数 REACT { http://localhost:3000/shop/sidebar/list?cat=&q=black }

Question

我需要帮助从表单提交中获取 URL 参数

http://localhost:3000/shop/sidebar/list?cat=&q=black

我需要得到 q 的值

我认得路

using onSubmit={ onSubmitHandler}

但我需要一种不同的方式

<form action={`${process.env.PUBLIC_URL}/shop/sidebar/list`} method="GET">



<Route exact
          path={`${process.env.PUBLIC_URL}/shop/sidebar/:grid`}
          component={Sidebar}
   />

当我使用

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

并做

const query = useParams().grid
console.log(query)

我只看到列表，但我需要一个值 q

Answer 1

import React from "react";
import { useLocation} from "react-router-dom";

使用路由器 dom 执行此操作

  let query= new URLSearchParams(useLocation().search);
  let value = query.get("q");

或者没有路由器dom这样做

  let query= new URLSearchParams(window.location.search);
  let value = query.get("q");

获取 url 表单提交的参数 REACT { http://localhost:3000/shop/sidebar/list?cat=&q=black }

Get url params for form submit REACT { http://localhost:3000/shop/sidebar/list?cat=&q=black }

javascript

query-parameters

reactjs

react-router

react-router-dom