如何在我的路由中定义路由。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钩子可以帮助你在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>
)
}
其他回答
最简单的解决方案!
在路由方面:
<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 });
});
}
我使用了一个名为query-string的外部包来解析url参数，如下所示。
import React, {Component} from 'react'
import { parse } from 'query-string';
resetPass() {
const {password} = this.state;
this.setState({fetching: true, error: undefined});
const query = parse(location.search);
return fetch(settings.urls.update_password, {
method: 'POST',
headers: {'Content-Type': 'application/json', 'Authorization': query.token},
mode: 'cors',
body: JSON.stringify({password})
})
.then(response=>response.json())
.then(json=>{
if (json.error)
throw Error(json.error.message || 'Unknown fetch error');
this.setState({fetching: false, error: undefined, changePassword: true});
})
.catch(error=>this.setState({fetching: false, error: error.message}));
}
在typescript中，参见下面的示例片段:
const getQueryParams = (s?: string): Map<string, string> => {
if (!s || typeof s !== 'string' || s.length < 2) {
return new Map();
}
const a: [string, string][] = s
.substr(1) // remove `?`
.split('&') // split by `&`
.map(x => {
const a = x.split('=');
return [a[0], a[1]];
}); // split by `=`
return new Map(a);
};
在react中使用react-router-dom，你可以做
const {useLocation} from 'react-router-dom';
const s = useLocation().search;
const m = getQueryParams(s);
参见下面的例子
//下面是上面转换和缩小的ts函数 如果(const getQueryParams = t = > {! t | |“字符串”!=typeof t||t.length<2)return new Map;const r=t.substr(1).split("&")。地图(t = > {const r = t.split(" = ");返回[r[0],[1]]});返回新地图(r)}; //一个示例查询字符串 Const s = '?__arg1 = value1&arg2 = value2 ' getQueryParams(s) console.log (m.get (__arg1)) console.log (m.get(最长)) Console.log (m.t get('arg3')) //不存在，返回undefined
也许有人可以帮助解释为什么，但如果你试图从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);
你可以创建一个简单的钩子来从当前位置提取搜索参数:
import React from 'react';
import { useLocation } from 'react-router-dom';
export function useSearchParams<ParamNames extends string[]>(...parameterNames: ParamNames): Record<ParamNames[number], string | null> {
const { search } = useLocation();
return React.useMemo(() => { // recalculate only when 'search' or arguments changed
const searchParams = new URLSearchParams(search);
return parameterNames.reduce((accumulator, parameterName: ParamNames[number]) => {
accumulator[ parameterName ] = searchParams.get(parameterName);
return accumulator;
}, {} as Record<ParamNames[number], string | null>);
}, [ search, parameterNames.join(',') ]); // join for sake of reducing array of strings to simple, comparable string
}
然后你可以像这样在你的功能组件中使用它:
// current url: http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla
const { __firebase_request_key } = useSearchParams('__firebase_request_key');
// current url: http://localhost:3000/home?b=value
const searchParams = useSearchParameters('a', 'b'); // {a: null, b: 'value'}
