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

Popular Videos 584

Electronic Armory

Submit Your Video

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