如何在我的路由中定义路由。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>
当前回答
let data = new FormData();
data.append('file', values.file);
其他回答
你可以使用这个用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');
let data = new FormData();
data.append('file', values.file);
React路由器v4
使用组件
<Route path="/users/:id" component={UserPage}/>
this.props.match.params.id
该组件自动使用路由道具呈现。
使用渲染
<Route path="/users/:id" render={(props) => <UserPage {...props} />}/>
this.props.match.params.id
路由道具被传递给渲染函数。
从v4开始，React路由器不再直接在其location对象中提供查询参数。原因是
There are a number of popular packages that do query string parsing/stringifying slightly differently, and each of these differences might be the "correct" way for some users and "incorrect" for others. If React Router picked the "right" one, it would only be right for some people. Then, it would need to add a way for other users to substitute in their preferred query parsing package. There is no internal use of the search string by React Router that requires it to parse the key-value pairs, so it doesn't have a need to pick which one of these should be "right".
包含了这个之后，只解析location会更有意义。在需要查询对象的视图组件中搜索。
你可以通过覆盖react-router中的withRouter来实现这一点
customWithRouter.js
import { compose, withPropsOnChange } from 'recompose';
import { withRouter } from 'react-router';
import queryString from 'query-string';
const propsWithQuery = withPropsOnChange(
['location', 'match'],
({ location, match }) => {
return {
location: {
...location,
query: queryString.parse(location.search)
},
match
};
}
);
export default compose(withRouter, propsWithQuery)
React路由器v6，使用钩子
在react-router-dom v6中，有一个名为useSearchParams的新钩子。所以,
const [searchParams, setSearchParams] = useSearchParams();
searchParams.get("__firebase_request_key")
你会得到“blablabla”。注意，searchParams是URLSearchParams的一个实例，它也实现了一个迭代器，例如用于使用Object.fromEntries等。
React Router v4/v5，没有钩子，通用
React Router v4不再为你解析查询，但你只能通过this.props.location.search(或useLocation，见下文)访问它。原因见nbeuchat的答案。
例如，你可以用qs库导入qs
qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).__firebase_request_key
另一个库是query-string。有关解析搜索字符串的更多想法，请参阅这个答案。如果你不需要ie兼容性，你也可以使用
new URLSearchParams(this.props.location.search).get("__firebase_request_key")
对于功能组件，你可以用钩子useLocation替换this.props.location。注意，你可以使用window.location。搜索，但这将不允许在更改时触发React渲染。 如果你的(非功能性的)组件不是Switch的直接子组件，你需要使用throuter来访问路由器提供的任何道具。
React路由器v3
React Router已经为你解析了位置，并将它作为道具传递给你的RouteComponent。您可以访问查询(在?在url)部分通过
this.props.location.query.__firebase_request_key
如果你在路由器中寻找用冒号(:)分隔的路径参数值，这些可以通过
this.props.match.params.redirectParam
这适用于最新的React Router v3版本(不确定是哪个)。旧版本的路由器报告使用this.props.params.redirectParam。
一般
尼扎姆。Sp的建议
console.log(this.props)
无论如何都会有帮助的。
