如何在我的路由中定义路由。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>
当前回答
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
其他回答
http://localhost:8000/#/signin?id=12345
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);//12345
}
componentDidMount(){
//http://localhost:3000/service/anas
//<Route path="/service/:serviceName" component={Service} />
const {params} =this.props.match;
this.setState({
title: params.serviceName ,
content: data.Content
})
}
React路由器5.1+
5.1引入了各种钩子，如useLocation和useParams，可以在这里使用。
例子:
<Route path="/test/:slug" component={Dashboard} />
如果我们去参观
http://localhost:3000/test/signin?_k=v9ifuf&__firebase_request_key=blablabla
你可以把它找回来
import { useLocation } from 'react-router';
import queryString from 'query-string';
const Dashboard: React.FC = React.memo((props) => {
const location = useLocation();
console.log(queryString.parse(location.search));
// {__firebase_request_key: "blablabla", _k: "v9ifuf"}
...
return <p>Example</p>;
}
this.props.params。Your_param_name将工作。
这是从查询字符串中获取参数的方法。 请执行console.log(this.props);探索所有的可能性。
据我所知，有三种方法可以做到。
1.使用正则表达式获取查询字符串。
2.您可以使用浏览器api。 图片当前的url是这样的:
http://www.google.com.au?token=123
我们只想得到123;
第一个
const query = new URLSearchParams(this.props.location.search);
Then
const token = query.get('token')
console.log(token)//123
使用第三个名为“query-string”的库。 首先安装它 NPM I查询字符串 然后导入到当前的javascript文件中: 导入query-string
下一步是在当前url中获取'token'，请执行以下操作:
const value=queryString.parse(this.props.location.search);
const token=value.token;
console.log('token',token)//123
2019年2月25日更新
4. 如果当前url如下所示:
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
