如何在我的路由中定义路由。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中没有查询参数，该对象将为空
let url = window.location.toString(); Let params = url?.split("?")[1]?.split("&"); 让obj = {}; params?.forEach((el) => { Let [k, v] = el?.split("="); obj[k] = v.replaceAll("%20"， " " "); })； console.log (obj);
其他回答
React Router v4不再有props.location.query对象(见github讨论)。因此，已接受的答案将不适用于较新的项目。
v4的解决方案是使用外部库查询字符串来解析props.location.search
const qs = require('query-string');
//or
import * as qs from 'query-string';
console.log(location.search);
//=> '?foo=bar'
const parsed = qs.parse(location.search);
console.log(parsed);
//=> {foo: '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"]
我花了很长时间才解决这个问题。如果以上都不行，你可以试试这个。我正在使用创建-反应应用程序
需求
react-router-dom ^ 4.3.1“:
解决方案
在指定路由器的位置
<Route path="some/path" ..../>
像这样添加您想要传入的参数名
<Route path="some/path/:id" .../>
在你渲染一些/路径的页面上，你可以指定这个来查看参数名调用id，就像这样
componentDidMount(){
console.log(this.props);
console.log(this.props.match.params.id);
}
在导出默认值的最后
export default withRouter(Component);
记住要包含import
import { withRouter } from 'react-router-dom'
当console.log(this.props)时，你就可以知道传递了什么。玩得开心!
React路由器v6
来源:在React路由器中获取查询字符串(搜索参数)
使用新的useSearchParams钩子和.get()方法:
const Users = () => {
const [searchParams] = useSearchParams();
console.log(searchParams.get('sort')); // 'name'
return <div>Users</div>;
};
使用这种方法，您可以读取一个或几个参数。
将参数作为一个对象:
如果你需要一次性获得所有的查询字符串参数，那么我们可以像这样使用Object.fromEntries:
const Users = () => {
const [searchParams] = useSearchParams();
console.log(Object.fromEntries([...searchParams])); // ▶ { sort: 'name', order: 'asecnding' }
return <div>Users</div>;
};
阅读更多和现场演示:在React路由器中获取查询字符串(搜索参数)
在需要访问可以使用的参数的组件中
this.props.location.state.from.search
这将显示整个查询字符串(在?标志)
