REACT JS TUTORIAL #7 - React Router Params & Queries

By: LearnCode.academy

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.

GET THE SOURCE CODE:
https://github.com/learncodeacademy/react-js-tutorials

React JS #1: Intro & Workspace Setup
https://youtu.be/MhkGQAoc7bc (Coming Tues, Feb 2@11CST)

React JS #2: Anatomy of a Component
https://youtu.be/fd2Cayhez58 (Coming Wed, Feb 3@11CST)

React JS #3: Composing Multiple Components
https://youtu.be/vu_rIMPROoQ (Coming Thurs, Feb 4@11CST)

React JS #4: State, Props & Data
https://youtu.be/qh3dYM6Keuw (Coming Fri, Feb 5@11CST)

React JS #5: Events & Data Changes
https://youtu.be/_D1JGNidMr4 (Coming Mon, Feb 8@11CST)

React JS #6: React Router & Intro to Single Page Apps
https://youtu.be/olLI54FATb8 (Coming Tues, Feb 9@11CST)

React JS #7: React Router Params & Queries
https://youtu.be/ZBxMljq9GSE

React JS #8 - React Inline Styles & Component Arrays
https://youtu.be/XVdwq8W2ZsM

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>

or

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

and

<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: https://www.youtube.com/watch?v=ZBxMljq9GSE

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.