REACT JS TUTORIAL #7 - React Router Params & Queries


505   2   128375

Uploaded on 02/10/2016

React Router has great and simple features for accessing route params and query params. Let's get into them.


React JS #1: Intro & Workspace Setup (Coming Tues, Feb 2@11CST)

React JS #2: Anatomy of a Component (Coming Wed, Feb 3@11CST)

React JS #3: Composing Multiple Components (Coming Thurs, Feb 4@11CST)

React JS #4: State, Props & Data (Coming Fri, Feb 5@11CST)

React JS #5: Events & Data Changes (Coming Mon, Feb 8@11CST)

React JS #6: React Router & Intro to Single Page Apps (Coming Tues, Feb 9@11CST)

React JS #7: React Router Params & Queries

React JS #8 - React Inline Styles & Component Arrays

Comments (3):

By anonymous    2017-09-20

I had the same problem to show an user detail from my application.

You can do this:

<Link to={'/ideas/'+this.props.testvalue }>Create Idea</Link>


<Link to="ideas/hello">Create Idea</Link>


<Route name="ideas/:value" handler={CreateIdeaView} />

to get this via this.props.params.value at your CreateIdeaView class.

You can see this video that helped me a lot:

Original Thread

By anonymous    2018-02-12

Here's what I have done so far,

This is the Route that I have defined for a page

<Route path='emails/user/view/:id' component={AccountEmails} />

And here's where the Component is being rendered

const AccountEmails = ({params: {id}}) => <ReceiptsListBox url={"/api/accounts/"+id+"/receipts.json"}></ReceiptsListBox>

Now, within the render() method of the component, I tried to console.log(this.props.location.query) unfortunately this.props.location is undefined.

Here's the YouTube video that I have referred to.

react-router version 2.8.1 and react version 15.3.2

Original Thread

Submit Your Video

If you have some great dev videos to share, please fill out this form.