如何在我的路由中定义路由。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路由器v5.1引入了钩子:
For
<Route path="/posts/:id">
<BlogPost />
</Route>
你可以通过hook访问params / id:
const { id } = useParams();
更多的在这里。
使用let {redirectParam} = useParams();如果你用的是功能组件
它是一个类组件
constructor (props) {
super(props);
console.log(props);
console.log(props.match.params.redirectParam)
}
async componentDidMount(){
console.log(this.props.match.params.redirectParam)
}
export class ClassName extends Component{
constructor(props){
super(props);
this.state = {
id:parseInt(props.match.params.id,10)
}
}
render(){
return(
//Code
{this.state.id}
);
}
在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
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'}
