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

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

你可以检查react-router，简单地说，你可以使用代码获取查询参数，只要你在路由器中定义:

this.props.params.userId

React Router v4不再有props.location.query对象(见github讨论)。因此，已接受的答案将不适用于较新的项目。

v4的解决方案是使用外部库查询字符串来解析props.location.search

const qs = require('query-string');
//or
import * as qs from 'query-string';

console.log(location.search);
//=> '?foo=bar'

const parsed = qs.parse(location.search);
console.log(parsed);
//=> {foo: 'bar'}

React路由器v3

使用React Router v3，你可以从this.props.location.search (?qs1=naisarg&qs2=parmar)获取查询字符串。例如，使用let params = queryString.parse(this.props.location.search)，将给出{qs1: 'naisarg'， qs2: 'parmar'}

React路由器v4

在React Router v4中，this.props.location.query不再存在。您需要使用this.props.location.search，并自己或使用现有的包(如query-string)解析查询参数。

例子

下面是一个使用React Router v4和query-string库的最小示例。

import { withRouter } from 'react-router-dom';
import queryString from 'query-string';
    
class ActivateAccount extends Component{
    someFunction(){
        let params = queryString.parse(this.props.location.search)
        ...
    }
    ...
}
export default withRouter(ActivateAccount);

理性的

React Router团队移除query属性的理由是:

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". [...] The approach being taken for 4.0 is to strip out all the "batteries included" kind of features and get back to just basic routing. If you need query string parsing or async loading or Redux integration or something else very specific, then you can add that in with a library specifically for your use case. Less cruft is packed in that you don't need and you can customize things to your specific preferences and needs.

你可以在GitHub上找到完整的讨论。

React路由器v5.1引入了钩子:

For

<Route path="/posts/:id">
  <BlogPost />
</Route>

你可以通过hook访问params / id:

const { id } = useParams();

更多的在这里。

React路由器Dom V6 https://reactrouter.com/docs/en/v6/hooks/use-search-params

import * as React from "react";
import { useSearchParams } from "react-router-dom";

function App() {
  let [searchParams, setSearchParams] = useSearchParams();

  function handleSubmit(event) {
    event.preventDefault();
    // The serialize function here would be responsible for
    // creating an object of { key: value } pairs from the
    // fields in the form that make up the query.
    let params = serializeFormQuery(event.target);
    setSearchParams(params);
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>{/* ... */}</form>
    </div>
  );
}

直到React路由器Dom V5

function useQueryParams() {
    const params = new URLSearchParams(
      window ? window.location.search : {}
    );

    return new Proxy(params, {
        get(target, prop) {
            return target.get(prop)
        },
    });
}

React钩子很棒

如果你的url看起来像/users?页面= 2数= 10字段=姓名、电子邮件、电话

// app.domain.com/users?page=2&count=10&fields=name,email,phone

const { page, fields, count, ...unknown } = useQueryParams();

console.log({ page, fields, count })
console.log({ unknown })

如果您的查询参数包含hyphone("-")或空格(" ") 然后你不能像{page, fields, count，…未知的}

你需要做传统的作业，比如

// app.domain.com/users?utm-source=stackOverFlow

const params = useQueryParams();

console.log(params['utm-source']);