如何在我的路由中定义路由。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')
其他回答
有了这一行代码，你可以在React Hook和React Class Component的任何地方使用它。
https://www.hunterisgod.com/?city=Leipzig
let city = (new URLSearchParams(window.location.search)).get("city")
我使用了一个名为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}));
}
在需要访问可以使用的参数的组件中
this.props.location.state.from.search
这将显示整个查询字符串(在?标志)
假设有一个url如下所示
http://localhost:3000/callback?code=6c3c9b39-de2f-3bf4-a542-3e77a64d3341
如果我们想从该URL提取代码，下面的方法将工作。
const authResult = new URLSearchParams(window.location.search);
const code = authResult.get('code')
最受欢迎的答案中的链接是死的，因为SO不让我评论，对于ReactRouter v6.3.0，你可以使用params钩子
import * as React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';
function ProfilePage() {
// Get the userId param from the URL.
let { userId } = useParams();
// ...
}
function App() {
return (
<Routes>
<Route path="users">
<Route path=":userId" element={<ProfilePage />} />
<Route path="me" element={...} />
</Route>
</Routes>
);
}
