Read URL parameters

Question

I have a very basic app and I want to read the request parameter values

http://localhost:3000/submission?issueId=1410&score=3

Page:

const Submission = () => {
    console.log(this.props.location); // error

    return ();
}

export default Submission;

App

const App = () => (
   <Router>
       <div className='App'>
           <Switch>
               <Route path="/" exact component={Dashboard} />
               <Route path="/submission" component={Submission} />
               <Route path="/test" component={Test} />
           </Switch>
       </div>
   </Router>
);

export default App;

Loïck M · Accepted Answer · 2019-05-31 11:28:42Z

Did you setup correctly react-router-dom with the HOC in your Submission component ?

Example :

import { withRouter } from 'react-router-dom'

const Submission = ({ history, location }) => (
  <button
    type='button'
    onClick={() => { history.push('/new-location') }}
  >
    Click Me!
  </button>
)

export default withRouter(Submission)

If you already did that you can access the params like that :

const queryString = require('query-string');

const parsed = queryString.parse(props.location.search);

You can also use new URLSearchParams if you want something native and it works for your needs

const params = new URLSearchParams(props.location.search);
const foo = params.get('foo'); // bar

Be careful, i noticed that you have a functional component and you try to access the props with this.props. It's only for class component.

Matthias Fischer · Accepted Answer · 2019-05-31 11:27:50Z

0

When you use a functional component you will need the props as a parameter of the function declaration. Then the props should be used within this function without this.

const Submission = (props) => {
  console.log(props.location); 
  return (
    <div />
  );
};

answered May 31, 2019 at 11:27

Matthias Fischer

1,01610 silver badges9 bronze badges

Comments

Marios Simou · Accepted Answer · 2019-05-31 11:34:01Z

0

The location API provides a search property that allows to get the query parameters of a URL. This can be easily done using the URLSearchParams object. For example, if the url of your page http://localhost:3000/submission?issueId=1410&score=3 the code will look like:

const searchParams = location.search // location object provided by react-router-dom 
const params = new URLSearchParams(searchParams)
const score = params.get('score') // 3
const issueId = params.get('issueId') // 1410

answered May 31, 2019 at 11:34

Marios Simou

1813 silver badges8 bronze badges

Collectives™ on Stack Overflow

Read URL parameters

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related