如何在我的路由中定义路由。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 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'}
其他回答
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)
无论如何都会有帮助的。
在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"}
在React Router v4中，只有withRoute才是正确的方式
您可以通过withRouter高阶组件访问历史对象的属性和最近的匹配。withRouter将在包装组件呈现时将更新的匹配、位置和历史道具传递给它。
import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'
// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
static propTypes = {
match: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
}
render() {
const { match, location, history } = this.props
return (
<div>You are now at {location.pathname}</div>
)
}
}
// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation)
https://reacttraining.com/react-router/web/api/withRouter
你可以使用这个用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');
我花了很长时间才解决这个问题。如果以上都不行，你可以试试这个。我正在使用创建-反应应用程序
需求
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)时，你就可以知道传递了什么。玩得开心!
