非常容易

Question

我在我的项目中使用react-router-dom 4.0.0-beta.6。我有一个如下代码：

<Route exact path="/home" component={HomePage}/>

我想在HomePage组件中获取查询参数。我找到了location.search param，它看起来像这样：?key=value，所以它是未解析的。

使用react-router v4获取查询参数的正确方法是什么？

Answer 1

解析查询字符串的能力是从V4中取出的，因为多年来一直有人要求支持不同的实现。有了这个，团队决定最好让用户决定实现的样子。我们建议导入查询字符串lib。 Here's one that I use

const queryString = require('query-string');

const parsed = queryString.parse(props.location.search);

如果您想要原生的东西并且它可以满足您的需求，您也可以使用new URLSearchParams

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

您可以阅读有关决定here

的更多信息

Answer 2

给出的答案是可靠的。

如果您想使用qs模块而不是query-string（它们的流行程度相同），请使用以下语法：

const query = qs.parse(props.location.search, {
  ignoreQueryPrefix: true
})

ignoreQueryPrefix 选项是忽略前导问号。

Answer 3

另一种有用的方法是像这样使用开箱即用的URLSearchParams；

  let { search } = useLocation();

   const query = new URLSearchParams(search);
   const paramField = query.get('field');
   const paramValue = query.get('value');

干净，易读且不需要模块。以下是更多信息；

Answer 4

接受的答案效果很好，但如果您不想安装额外的套餐，可以使用：

getUrlParameter = (name) => {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    let regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    let results = regex.exec(window.location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
  };

给定http://www.google.co.in/?key=value

getUrlParameter('key');

将返回value

Answer 5

我正在研究反应路由器v4的params，他们没有将它用于v4，而不像反应路由器v2 / 3。我将留下另一个功能 - 也许有人会发现它有用。你只需要es6或普通的javascript。

SqlConnection sq = new SqlConnection(@"Data Source=DESKTOP-GH3KCDH\SQLEXPRESS;Initial Catalog=Project1;User ID=sa;Password=Salma0300.");
String st = "select data FROM Picture";
sq.Open();
PictureBox[] pb = { pictureBox1,pictureBox2,pictureBox3,pictureBox4,pictureBox5,pictureBox6,pictureBox7,pictureBox8};

    MemoryStream stream = new MemoryStream();
    SqlCommand sqlcom = new SqlCommand(st, sq);
    byte[] image = (byte[])sqlcom.ExecuteScalar();
    stream.Write(image,0,image.Length);
    Bitmap bitmap = new Bitmap(stream);
    pb[1].Image = bitmap;
    pb[2].Image = bitmap;

此外，此功能可以改进

Answer 6

嗯？

queryfie(string){
    return string
        .slice(1)
        .split('&')
        .map(q => q.split('='))
        .reduce((a, c) => { a[c[0]] = c[1]; return a; }, {});
}

queryfie(this.props.location.search);

Answer 7

根据他们的文档https://reactrouter.com/web/example/query-parameters，您需要：

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

// A custom hook that builds on useLocation to parse
// the query string for you.
function useQuery() {
  return new URLSearchParams(useLocation().search);
}

function App() {
    const query = useQuery();
    console.log(query.get('queryYouAreLookingFor'));
}

Answer 8

我刚刚做了这个，所以如果您更新以从较低版本对路由器v4或更高版本做出反应，那么就不需要更改整个代码结构（使用redux路由器存储中的查询）。

https://github.com/saltas888/react-router-query-middleware

Answer 9

无需任何包装：

const params = JSON.parse(JSON.stringify(this.props.match.params));

然后您可以使用params.id

来获取相关参数

Answer 10

这是一种无需导入任何其他库的方法

const queryString = (string) => {
  return string.slice(1).split('&')
    .map((queryParam) => {
      let data = queryParam.split('=')
      return { key: data[0], value: data[1] }
    })
    .reduce((query, data) => {
      query[data.key] = data.value
      return query
    }, {});
}

const paramData = (history && history.location && history.location.search)
                ? parseQueryString(history.location.search)
                : null;

Answer 11

非常容易

只需使用钩子useParams()

示例：

路由器：

<Route path="/user/:id" component={UserComponent} />

在您的组件中 t：

export default function UserComponent() {

  const { id } = useParams();

  return (
    <>{id}</>
  );
}

如何在react-router v4中获取查询参数

11 个答案:

非常容易

示例：