react-router：如何从URL获取参数值
如何在我的routes.jsx文件中定义一个路由，以便在从其服务器redirect之后，通过Twitter单点login过程生成的URL中捕获__firebase_request_key参数值？
http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla
我试着用下面的路由configuration，但是:redirectParam没有捕获提到的参数：
<Router> <Route path="/" component={Main}> <Route path="signin" component={SignIn}> <Route path=":redirectParam" component={TwitterSsoButton} /> </Route> </Route> </Router>
React路由器已经parsing了你的位置，并把它作为道具传给你的RouteComponent 。 您可以通过访问查询（＆后）部分
this.props.location.query.__firebase_request_key
如果您正在查找path参数值，在路由器中用冒号（:)分隔，则可以通过这些参数值访问这些值
this.props.match.params.redirectParam
（旧的路由器版本被报告使用this.props.params.redirectParam）
nizam.sp的build议
console.log(this.props)
在任何情况下都会有所帮助。
你可以检查react-router ，简单来说，只要你在你的路由器中定义就可以使用代码来获取查询参数：
this.props.params.userId
反应路由器v4
使用component
<Route path="/users/:id" component={UserPage}/>
this.props.match.params.id
该组件会自动使用path道具进行渲染。
使用render
<Route path="/users/:id" render={(props) => <UserPage {...props} />}/>
this.props.match.params.id
path道具被传递给渲染function。
this.props.params.your_param_name将工作。
这是从查询string中获取参数的方法。
请做console.log(this.props); 探索所有的可能性。
React Router v4不再具有 props.location.query 对象 （请参阅github讨论）。 所以接受的答案不适用于较新的项目。
v4的解决scheme是使用外部库查询string来parsingprops.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'}
在需要访问可以使用的参数的组件中
this.props.location.state.from.search
这将揭示整个查询string（在?符号之后的所有内容）
如果你没有得到this.props …你期望基于其他答案，你可能需要使用withRouter （ docs v4 ）：
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 TwitterSsoButton = withRouter(ShowTheLocation) // This gets around shouldComponentUpdate withRouter(connect(...)(MyComponent)) // This does not connect(...)(withRouter(MyComponent))
