如何在我的 routes.jsx 文件中定义一个路由，以便在__firebase_request_key从 Twitter 的服务器重定向后从 Twitter 的单点登录过程生成的 URL 中捕获参数值？
http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla
我尝试使用以下路由配置，但:redirectParam没有捕获提到的参数：
<Router>
<Route path="/" component={Main}>
<Route path="signin" component={SignIn}>
<Route path=":redirectParam" component={TwitterSsoButton} />
</Route>
</Route>
</Router>
React Router v4/v5/v6，通用
React Router v4 不再为您解析查询，但您只能通过this.props.location.search（或 useLocation，见下文）访问它。原因参见nbeuchat 的回答。
例如，您可以使用qs库导入qs
qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).__firebase_request_key
另一个库是query-string。有关解析搜索字符串的更多想法，请参阅此答案。如果您不需要IE 兼容性，您也可以使用
new URLSearchParams(this.props.location.search).get("__firebase_request_key")
对于功能组件，您将替换this.props.location为钩子useLocation。请注意，您可以使用window.location.search，但这将不允许在更改时触发 React 渲染。如果您的（非功能性）组件不是 a 的直接子级，则Switch您需要使用withRouter来访问任何路由器提供的props。
react-router v3
React Router 已经为您解析了位置并将其作为props传递给您的RouteComponent。您可以通过以下方式访问查询（在 ? 在 url 之后）部分
this.props.location.query.__firebase_request_key
如果您正在查找路由器内部以冒号 (:) 分隔的路径参数值，则可以通过以下方式访问这些值
this.props.match.params.redirectParam
这适用于较晚的 React Router v3 版本（不确定是哪个）。据报道，较旧的路由器版本使用this.props.params.redirectParam.
一般的
nizam.sp 的建议
console.log(this.props)
在任何情况下都会有所帮助。
使用 component
<Route path="/users/:id" component={UserPage}/>
this.props.match.params.id
该组件会使用路由props自动呈现。
使用 render
<Route path="/users/:id" render={(props) => <UserPage {...props} />}/>
this.props.match.params.id
路由props被传递给渲染函数。
react-router 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-router 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属性的理由是：
有许多流行的软件包对查询字符串的解析/字符串化略有不同，这些差异中的每一个可能对某些用户来说是“正确”的方式，而对其他人来说可能是“不正确”的方式。如果 React Router 选择了“正确”的那一个，它只会适合某些人。然后，它需要为其他用户添加一种方法来替换他们首选的查询解析包。React Router 没有在内部使用搜索字符串来要求它解析键值对，因此它不需要选择其中哪一个应该是“正确的”。
[...]
4.0 所采用的方法是去掉所有“包含电池”的特性，回到基本的路由。如果您需要查询字符串解析或异步加载或 Redux 集成或其他非常具体的东西，那么您可以将其添加到专门针对您的用例的库中。更少的杂物包含在您不需要的东西中，您可以根据您的特定偏好和需求自定义内容。
您可以在GitHub 上找到完整的讨论。
据我所知，您可以通过三种方法来做到这一点。
1.使用正则表达式获取查询字符串。
2.您可以使用浏览器api。图像当前的网址是这样的：
http://www.google.com.au?token=123
我们只想得到 123；
第一的
const query = new URLSearchParams(this.props.location.search);
然后
const token = query.get('token')
console.log(token)//123
3. 使用名为“query-string”的第三个库。首先安装它
npm i query-string
然后将其导入到当前的 javascript 文件中：
import queryString from 'query-string'
下一步是在当前 url 中获取“令牌”，执行以下操作：
const value=queryString.parse(this.props.location.search);
const token=value.token;
console.log('token',token)//123
希望能帮助到你。
25/02/2019 更新
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 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'}