Friday, August 9, 2019

React Router v4 Tutorial - #3 Route Parameters

Static URLs can get you started quickly, yet sooner or later, you'll come across resources that entail dynamic paths. For instance, your site could feature all of your portfolio projects under /projects route, whereas an individual project could be shown as /projects/react-todo-app. The last part is where route parameters come in. How do you capture a segment of the URI from a given route? In React Router, we preceed the URL parameter with a colon, and its value will then be available as part of the "match" object in your component's props.

Make sure to also use the "render" prop on the Route to supply any additional props that the target component will require (note that you can't use "component", unless you don't intend to pass down any extra props). In the video, we'll be passing writer's info down to the Writer component. You could pass the entire writer object, but I think passing individual data pieces, such as writer's name, description, and image source, is more straightforward; after all, the business domain of the component is already implicit in its name! (Writer)

I've worked very intimately with Laravel in the past, and if you're willing to learn more about routing conventions (particularly when building RESTful APIs), I can't recommend their docs enough. Check out this read on resourceful controllers You don't need to know any Laravel or MVC; just look at how they map routes to CRUD actions. I personally keep coming back to this table when in doubt or in need of guidance.

No comments:

Post a Comment