从v4开始，React路由器不再直接在其location对象中提供查询参数。原因是

There are a number of popular packages that do query string parsing/stringifying slightly differently, and each of these differences might be the "correct" way for some users and "incorrect" for others. If React Router picked the "right" one, it would only be right for some people. Then, it would need to add a way for other users to substitute in their preferred query parsing package. There is no internal use of the search string by React Router that requires it to parse the key-value pairs, so it doesn't have a need to pick which one of these should be "right".

包含了这个之后，只解析location会更有意义。在需要查询对象的视图组件中搜索。

你可以通过覆盖react-router中的withRouter来实现这一点

customWithRouter.js

import { compose, withPropsOnChange } from 'recompose';
import { withRouter } from 'react-router';
import queryString from 'query-string';

const propsWithQuery = withPropsOnChange(
    ['location', 'match'],
    ({ location, match }) => {
        return {
            location: {
                ...location,
                query: queryString.parse(location.search)
            },
            match
        };
    }
);

export default compose(withRouter, propsWithQuery)

React路由器v4

使用组件

<Route path="/users/:id" component={UserPage}/> 

this.props.match.params.id

该组件自动使用路由道具呈现。

使用渲染

<Route path="/users/:id" render={(props) => <UserPage {...props} />}/> 

this.props.match.params.id

路由道具被传递给渲染函数。

如果你的路由器是这样的

<Route exact path="/category/:id" component={ProductList}/>

你会得到这样的id

this.props.match.params.id

您可以使用这段代码来获取作为对象的参数。如果url中没有查询参数，该对象将为空

let url = window.location.toString(); Let params = url?.split("?")[1]?.split("&"); 让obj = {}; params?.forEach((el) => { Let [k, v] = el?.split("="); obj[k] = v.replaceAll("%20"， " " "); })； console.log (obj);

在React-Router-Dom V5中

function useQeury() {
 const [query, setQeury] = useState({});
 const search = useLocation().search.slice(1);

 useEffect(() => {
   setQeury(() => {
     const query = new URLSearchParams(search);
     const result = {};
     for (let [key, value] of query.entries()) {
       result[key] = value;
     }
     setQeury(result);
   }, [search]);
 }, [search, setQeury]);

 return { ...query };
}


// you can destruct query search like:
const {page , search} = useQuery()

// result
// {page : 1 , Search: "ABC"}

当使用React钩子时，没有访问this.props.location的权限。 要获取url参数，请使用窗口对象。

const search = window.location.search;
const params = new URLSearchParams(search);
const foo = params.get('bar');