如何在我的路由中定义路由。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>
当前回答
不是反应的方式，但我相信这个单行函数可以帮助你:)
const getQueryParams = (query = null) => [...(new URLSearchParams(query||window.location.search||"")).entries()].reduce((a,[k,v])=>(a[k]=v,a),{});
或:
const getQueryParams = (query = null) => (query||window.location.search.replace('?','')).split('&').map(e=>e.split('=').map(decodeURIComponent)).reduce((r,[k,v])=>(r[k]=v,r),{});
或完整版:
const getQueryParams = (query = null) => {
return (
(query || window.location.search.replace("?", ""))
// get array of KeyValue pairs
.split("&")
// Decode values
.map((pair) => {
let [key, val] = pair.split("=");
return [key, decodeURIComponent(val || "")];
})
// array to object
.reduce((result, [key, val]) => {
result[key] = val;
return result;
}, {})
);
};
例子: URL:…?= = 1 b =建发集团有限公司的测试 代码:
getQueryParams()
//=> {a: "1", b: "c", d: "test"}
getQueryParams('type=user&name=Jack&age=22')
//=> {type: "user", name: "Jack", age: "22" }
其他回答
this.props.params。Your_param_name将工作。
这是从查询字符串中获取参数的方法。 请执行console.log(this.props);探索所有的可能性。
React路由器v5.1引入了钩子:
For
<Route path="/posts/:id">
<BlogPost />
</Route>
你可以通过hook访问params / id:
const { id } = useParams();
更多的在这里。
在需要访问可以使用的参数的组件中
this.props.location.state.from.search
这将显示整个查询字符串(在?标志)
当使用React钩子时，没有访问this.props.location的权限。 要获取url参数，请使用窗口对象。
const search = window.location.search;
const params = new URLSearchParams(search);
const foo = params.get('bar');
也许有点晚了，但是这个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>
)
}
