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

Question

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

我一直在使用 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

Answer 1

尝试使用：

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

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

Getting URL parameter in index.js in React

reactjs

react-localization