如何在我的路由中定义路由。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路由器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']);
其他回答
我花了很长时间才解决这个问题。如果以上都不行，你可以试试这个。我正在使用创建-反应应用程序
需求
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)时，你就可以知道传递了什么。玩得开心!
componentDidMount(){
//http://localhost:3000/service/anas
//<Route path="/service/:serviceName" component={Service} />
const {params} =this.props.match;
this.setState({
title: params.serviceName ,
content: data.Content
})
}
如果你的路由器是这样的
<Route exact path="/category/:id" component={ProductList}/>
你会得到这样的id
this.props.match.params.id
React路由器v5.1引入了钩子:
For
<Route path="/posts/:id">
<BlogPost />
</Route>
你可以通过hook访问params / id:
const { id } = useParams();
更多的在这里。
你可以使用这个用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');
