如何在我的路由中定义路由。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>
当前回答
假设有一个url如下所示
http://localhost:3000/callback?code=6c3c9b39-de2f-3bf4-a542-3e77a64d3341
如果我们想从该URL提取代码，下面的方法将工作。
const authResult = new URLSearchParams(window.location.search);
const code = authResult.get('code')
其他回答
最简单的解决方案!
在路由方面:
<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 });
});
}
React路由器v4
const urlParams = new URLSearchParams(this.props.location.search)
const key = urlParams.get('__firebase_request_key')
请注意，它目前还处于试验阶段。
查看浏览器兼容性:https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams#Browser_compatibility
let data = new FormData();
data.append('file', values.file);
你可以使用这个用Typescript写的简单钩子:
const useQueryParams = (query: string = null) => {
const result: Record<string, string> = {};
new URLSearchParams(query||window.location.search).forEach((value, key) => {
result[key] = value;
});
return result;
}
用法:
// http://localhost:3000/?userId=1889&num=112
const { userId, num } = useQueryParams();
// OR
const params = useQueryParams('userId=1889&num=112');
试试这个
http://localhost:4000/#/amoos?id=101
// ReactJS
import React from "react";
import { useLocation } from "react-router-dom";
const MyComponent = () => {
const search = useLocation().search;
const id = new URLSearchParams(search).get("id");
console.log(id); //101
}
// VanillaJS
const id = window.location.search.split("=")[1];
console.log(id); //101
