How can I define a route in my routes.jsx file to capture the __firebase_request_key
parameter value from a URL generated by Twitter\'s single sign on process a
If you aren't getting the this.props
... you were expecting based on the other answers, you may need to use 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))
When using React hooks there is no access to access to this.props.location
.
To capture url parameters use window
object.
const search = window.location.search;
const params = new URLSearchParams(search);
const foo = params.get('bar');
React router
from v4 onwards no longer gives you the query params
directly in its location
object. The reason being
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".
Having included that, It would just make more sense to just parse location.search in your view components that are expecting a query object.
You can do this generically by overriding the withRouter
from react-router
like
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)
componentDidMount(){
//http://localhost:3000/service/anas
//<Route path="/service/:serviceName" component={Service} />
const {params} =this.props.match;
this.setState({
title: params.serviceName ,
content: data.Content
})
}
Not the react way, but I beleive that this one-line function can help you :)
const getQueryParams = () => window.location.search.replace('?', '').split('&').reduce((r,e) => (r[e.split('=')[0]] = decodeURIComponent(e.split('=')[1]), r), {});
Example:
URL: ...?a=1&b=c&d=test
Code:
> getQueryParams()
< {
a: "1",
b: "c",
d: "test"
}
As far as I know there are three methods you can do that.
1.use regular expression to get query string.
2.you can use the browser api. image the current url is like this:
http://www.google.com.au?token=123
we just want to get 123;
First
const query = new URLSearchParams(this.props.location.search);
Then
const token = query.get('token')
console.log(token)//123
3. use a third library called 'query-string'. First install it
npm i query-string
Then import it to the current javascript file:
import queryString from 'query-string'
Next step is to get 'token' in the current url, do the following:
const value=queryString.parse(this.props.location.search);
const token=value.token;
console.log('token',token)//123
Hope it helps.
Updated on 25/02/2019
http://www.google.com.au?app=home&act=article&aid=160990
we define a function to get the parameters:
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
console.log(query)//"app=article&act=news_content&aid=160990"
var vars = query.split("&");
console.log(vars) //[ 'app=article', 'act=news_content', 'aid=160990' ]
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
console.log(pair)//[ 'app', 'article' ][ 'act', 'news_content' ][ 'aid', '160990' ]
if(pair[0] == variable){return pair[1];}
}
return(false);
}
We can get 'aid' by :
getQueryVariable('aid') //160990