ReactJS读取URL参数

Question

我使用的是反应性路由器-dom，根据文档，它说对于url模式https:\\example.com\user\:id\:gender，我们可以使用useParams()钩子来读取模式，如

import {useParams, Route} from react-router;

<Route exact path="/user/:id/:gender" component={User}/>

const user=(props)=>{
const params = useParams()
}

//params = {id:'1',gender:'f'}; output for url pattern >>> https:\\example.com\user\1\f 

但在我的例子中，我有两个要求

1. 性别字段有时是必需的，有时不需要，那么路由器需要做哪些更改？
2. 如何读取url模式https://example.com/user?id=1&gender=f，因为在这种模式下，如果我交换顺序，那么对参数对象没有任何影响。

Answer 1

您可以按以下方式对参数进行分解，并在任何地方使用它们

const { id , gender } = useParams();

Answer 2

如上文所述，如果您试图在URL中追加可选数据，则需要使用查询参数。

您可以简单地使用react路由器-dom库提供的"useLocation()“钩子从任何url中提取查询参数。

// https://example.com/user?id=1&gender=f
import React from "react";

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

function QueryParamsDemo() {
  let query = useLocation().search;
  let getParams = () => console.log(query); // output will be {id:1,gender:"f"}
  return (
    <div>
      <button onClick={() => getParams()}>Get Param</button>
    </div>
  );
}