如何在我的路由中定义路由。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" }
其他回答
最受欢迎的答案中的链接是死的，因为SO不让我评论，对于ReactRouter v6.3.0，你可以使用params钩子
import * as React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';
function ProfilePage() {
// Get the userId param from the URL.
let { userId } = useParams();
// ...
}
function App() {
return (
<Routes>
<Route path="users">
<Route path=":userId" element={<ProfilePage />} />
<Route path="me" element={...} />
</Route>
</Routes>
);
}
假设有一个url如下所示
http://localhost:3000/callback?code=6c3c9b39-de2f-3bf4-a542-3e77a64d3341
如果我们想从该URL提取代码，下面的方法将工作。
const authResult = new URLSearchParams(window.location.search);
const code = authResult.get('code')
也许有人可以帮助解释为什么，但如果你试图从App.js页面上的新安装的Create React App中点击props来查找位置，你会得到:
无法读取未定义的属性“搜索”
即使我有App.js作为主路径:
<Route exact path='/' render={props => (
只在App.js上，使用window。地点对我来说很合适:
import queryString from 'query-string';
...
const queryStringParams = queryString.parse(window.location.search);
你可以检查react-router，简单地说，你可以使用代码获取查询参数，只要你在路由器中定义:
this.props.params.userId
不是反应的方式，但我相信这个单行函数可以帮助你:)
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" }
