如何在我的路由中定义路由。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-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"}
其他回答
在需要访问可以使用的参数的组件中
this.props.location.state.from.search
这将显示整个查询字符串(在?标志)
容易解构分配URLSearchParams
测试尝试如下:
1 扫描:https://www.google.com/?param1=apple¶m2=banana
2 右键单击>页，单击Inspect > goto Console选项卡 然后粘贴下面的代码:
const { param1, param2 } = Object.fromEntries(new URLSearchParams(location.search));
console.log("YES!!!", param1, param2 );
输出:
YES!!! apple banana
你可以扩展params，如param1, param2，想扩展多少就扩展多少。
你可以检查react-router，简单地说，你可以使用代码获取查询参数，只要你在路由器中定义:
this.props.params.userId
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路由器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路由器中获取查询字符串(搜索参数)
