在 React 中的 index.js 中获取 URL 参数答案

【问题标题】：Getting URL parameter in index.js in React在 React 中的 index.js 中获取 URL 参数
【发布时间】：2021-08-10 15:18:25
【问题描述】：

我正在尝试获取一个 URL 参数来为整个应用程序设置正确的语言环境，使用 React。

我一直在使用queryString.parse(this.props.location.search)，组件内部没有问题，但它似乎在index.js 中不起作用。

考虑到以下代码，并且我只想为所有应用设置一次区域设置，我如何从 index.js 中读取 URL 参数？

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route } from "react-router-dom";

import queryString from 'query-string'

import Register from './components/Register/Register.js';
import Verify from './components/Verify/Verify.js';
import MFA from './components/MFA/MFA.js';

import {IntlProvider} from 'react-intl';
import German from './lang/de.json';
import English from './lang/en.json';


window.LOG_LEVEL = 'DEBUG';

const values = queryString.parse(this.props.location.search)
console.log(values.locales)
const locale = values.locales;

let lang;
if (locale==="en") {
   lang = English;
} else if (locale==="de") {
   lang = German;
}

const App = () => (
    <IntlProvider locale ={locale} messages={lang}>
        <BrowserRouter>
            <div className="h-100">
                <Route path="/" component={Register} exact={true} />
                <Route path="/mfa" component={MFA} />
                <Route path="/verify" component={Verify} />
            </div>
        </BrowserRouter>
    </IntlProvider>
);

const rootElement = document.getElementById("root");
ReactDOM.render( <App />, rootElement);

通过上面的代码，我从const values = queryString.parse(this.props.location.search) 得到一个Cannot read property 'location' of undefined

【问题讨论】：

标签： reactjs react-localization

【解决方案1】：

尝试使用：

const values = queryString.parse(window.location.search)

【讨论】：

@Eric Mitjans，当你使用函数组件时，不要使用this。