如何在我的路由中定义路由。jsx文件捕获__firebase_request_key参数值从一个URL生成的Twitter的单点登录过程后，从他们的服务器重定向?
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>
当前回答
在需要访问可以使用的参数的组件中
this.props.location.state.from.search
这将显示整个查询字符串(在?标志)
其他回答
当你使用react route dom时，将用for match清空对象，但如果你执行以下代码，则它将用于es6组件，以及它直接用于函数组件
import { Switch, Route, Link } from "react-router-dom";
<Route path="/profile" exact component={SelectProfile} />
<Route
path="/profile/:profileId"
render={props => {
return <Profile {...props} loading={this.state.loading} />;
}}
/>
</Switch>
</div>
通过这种方式，您可以获得道具并匹配参数和配置文件id
在对es6组件进行了大量研究后，这对我来说很有效。
最简单的解决方案!
在路由方面:
<Route path="/app/someUrl/:id" exact component={binder} />
在react代码中:
componentDidMount() {
var id = window.location.href.split('/')[window.location.href.split('/').length - 1];
var queryString = "http://url/api/controller/" + id
$.getJSON(queryString)
.then(res => {
this.setState({ data: res });
});
}
在需要访问可以使用的参数的组件中
this.props.location.state.from.search
这将显示整个查询字符串(在?标志)
也许有点晚了，但是这个react钩子可以帮助你在URL查询中获取/设置值:https://github.com/rudyhuynh/use-url-search-params(由我编写)。
不管有没有反应路由器，它都可以工作。 下面是您案例中的代码示例:
import React from "react";
import { useUrlSearchParams } from "use-url-search-params";
const MyComponent = () => {
const [params, setParams] = useUrlSearchParams()
return (
<div>
__firebase_request_key: {params.__firebase_request_key}
</div>
)
}
实际上，没有必要使用第三方库。我们可以用纯JavaScript。
考虑以下URL:
https://example.com?yourParamName=yourParamValue
现在我们得到:
const url = new URL(window.location.href);
const yourParamName = url.searchParams.get('yourParamName');
简而言之
const yourParamName = new URL(window.location.href).searchParams.get('yourParamName')
另一个智能解决方案(推荐)
const params = new URLSearchParams(window.location.search);
const yourParamName = params.get('yourParamName');
简而言之
const yourParamName = new URLSearchParams(window.location.search).get('yourParamName')
注意:
对于有多个值的参数，使用“getAll”而不是“get”
https：//example.com？yourParamName[]=yourParamValue1&yourParamName[]=yourParamValue2
const yourParamName = new URLSearchParams(window.location.search).getAll('yourParamName[]')
结果如下:
["yourParamValue1", "yourParamValue2"]
