如何在我的路由中定义路由。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>
当前回答
我使用了一个名为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}));
}
其他回答
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
你可以使用这个用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');
在React-Router-Dom V5中
function useQeury() {
const [query, setQeury] = useState({});
const search = useLocation().search.slice(1);
useEffect(() => {
setQeury(() => {
const query = new URLSearchParams(search);
const result = {};
for (let [key, value] of query.entries()) {
result[key] = value;
}
setQeury(result);
}, [search]);
}, [search, setQeury]);
return { ...query };
}
// you can destruct query search like:
const {page , search} = useQuery()
// result
// {page : 1 , Search: "ABC"}
你可以检查react-router，简单地说，你可以使用代码获取查询参数，只要你在路由器中定义:
this.props.params.userId
你也可以使用react-location-query包，例如:
const [name, setName] = useLocationField("name", {
type: "string",
initial: "Rostyslav"
});
return (
<div className="App">
<h1>Hello {name}</h1>
<div>
<label>Change name: </label>
<input value={name} onChange={e => setName(e.target.value)} />
</div>
</div>
);
名称-获取价值 setName =设置值
这个包有很多选项，在Github上的文档中阅读更多
