如何在我的路由中定义路由。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>
当前回答
在没有第三方库或复杂的解决方案的情况下，在一行中完成这一切。以下是如何
let myVariable = new URLSearchParams(history.location.search).get('business');
你唯一需要改变的是你自己的参数名称的单词“business”。
业务= url.com例子吗?你好
myVariable的结果将是hello
其他回答
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>;
}
React路由器Dom V6 https://reactrouter.com/docs/en/v6/hooks/use-search-params
import * as React from "react";
import { useSearchParams } from "react-router-dom";
function App() {
let [searchParams, setSearchParams] = useSearchParams();
function handleSubmit(event) {
event.preventDefault();
// The serialize function here would be responsible for
// creating an object of { key: value } pairs from the
// fields in the form that make up the query.
let params = serializeFormQuery(event.target);
setSearchParams(params);
}
return (
<div>
<form onSubmit={handleSubmit}>{/* ... */}</form>
</div>
);
}
直到React路由器Dom V5
function useQueryParams() {
const params = new URLSearchParams(
window ? window.location.search : {}
);
return new Proxy(params, {
get(target, prop) {
return target.get(prop)
},
});
}
React钩子很棒
如果你的url看起来像/users?页面= 2数= 10字段=姓名、电子邮件、电话
// app.domain.com/users?page=2&count=10&fields=name,email,phone
const { page, fields, count, ...unknown } = useQueryParams();
console.log({ page, fields, count })
console.log({ unknown })
如果您的查询参数包含hyphone("-")或空格(" ") 然后你不能像{page, fields, count，…未知的}
你需要做传统的作业，比如
// app.domain.com/users?utm-source=stackOverFlow
const params = useQueryParams();
console.log(params['utm-source']);
在需要访问可以使用的参数的组件中
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');
实际上，没有必要使用第三方库。我们可以用纯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"]
