this.props.params。Your_param_name将工作。

这是从查询字符串中获取参数的方法。 请执行console.log(this.props);探索所有的可能性。

如果你没有得到这个。道具…根据其他答案，您可能需要使用withthrouter (docs v4):

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>You are now at {location.pathname}</div>
    )
  }
}

// Create a new component that is "connected" (to borrow redux terminology) to the router.  
const TwitterSsoButton = withRouter(ShowTheLocation)  

// This gets around shouldComponentUpdate
withRouter(connect(...)(MyComponent))

// This does not
connect(...)(withRouter(MyComponent))

据我所知，有三种方法可以做到。

1.使用正则表达式获取查询字符串。

2.您可以使用浏览器api。 图片当前的url是这样的:

http://www.google.com.au?token=123

我们只想得到123;

第一个

 const query = new URLSearchParams(this.props.location.search);

Then

const token = query.get('token')
console.log(token)//123

使用第三个名为“query-string”的库。 首先安装它 NPM I查询字符串 然后导入到当前的javascript文件中: 导入query-string

下一步是在当前url中获取'token'，请执行以下操作:

const value=queryString.parse(this.props.location.search);
const token=value.token;
console.log('token',token)//123

2019年2月25日更新

4. 如果当前url如下所示:

http://www.google.com.au?app=home&act=article&aid=160990

我们定义一个函数来获取参数:

function getQueryVariable(variable)
{
        var query = window.location.search.substring(1);
        console.log(query)//"app=article&act=news_content&aid=160990"
        var vars = query.split("&");
        console.log(vars) //[ 'app=article', 'act=news_content', 'aid=160990' ]
        for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    console.log(pair)//[ 'app', 'article' ][ 'act', 'news_content' ][ 'aid', '160990' ] 
        if(pair[0] == variable){return pair[1];}
         }
         return(false);
}

我们可以通过以下方式获得“援助”:

getQueryVariable('aid') //160990

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']);

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

For

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

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

const { id } = useParams();

更多的在这里。

你可以使用这个用Typescript写的简单钩子:

const useQueryParams = (query: string = null) => {      
    const result: Record<string, string> = {};
    new URLSearchParams(query||window.location.search).forEach((value, key) => {
      result[key] = value;
    });
    return result;
}

用法:

// http://localhost:3000/?userId=1889&num=112
const { userId, num } = useQueryParams();
// OR
const params = useQueryParams('userId=1889&num=112');