Day 23 folks!! Seven more days and I am looking at a successful working month. To be honest. I never thought I was capable of sticking to something for so long. But proving myself wrong is the best feeling I have experienced. The lesson here is folks: before defining what your limits are, you got to test them first.

I didn’t blog for like five days. Although when I started 100 days of React initiative, I promised to blog daily about my progress or at least after completing two days. But folks! If you have read my last blog, you would have an idea that I was not at my best self. Also, the Eid was coming, so I decided to take some time off.

Despite my break, I still worked on some of my long-pending stuff. You can find them on my GitHub. Also, here is the link to what I was working on yesterday. โœŒ

๐ŸŽฉ Day 23

After publishing my last blog, someone told me that I had missed something while learning the Routes. So, today, I took another dive in React Render Dom. I covered a fair share of topics including:

  • Routes
  • Switch
  • Link
  • Route props
  • Passing props through a component which is enclosed in a Route
  • Making path parameters optional
  • Query Strings
  • Redirect

๐Ÿ“„ In my previous blog, I have already explained what the Route and Link component does. So, if you are looking for a quick guide about both of them, just hit here. Scroll down to the day 17 and voila! You will see there a small explanation on both of these components.

๐Ÿญ Passing props through component

I have given this topic a very generic title. But let me assure you that it isn’t what you are thinking. I will explain here how you can pass props through a component that is enclosed in a Route component.

Let me show you something first.

I want you guys to see these Routes carefully. You will notice that these Routes have path and component props. And each component prop is receiving a completely new component. So the question here, what would you do if you need to pass props through the component that is in Route props? ๐Ÿค”

It is super easy!! You only need to make a few changes to the syntax like replacingย component prop with render.

<Route path="/products" render={() => <Products sortBy="newest" />} />

That’s it. These small changes in the syntax will do the trick for you. And if you also need to pass the additional props of Route like the match, location, and history, you can do it by passing props as a parameter and then spreading it. ๐Ÿ’ฏ

<Route path="/products" render={props => <Products sortBy="newest" {...props}/>} />

๐Ÿ‘“ Making path parameters optional

React allows you to make parameters of path props optional. What you need to do is simply add a question mark (?) in front of it. And it will do the trick.

<Route path="/posts/:year?/:month?" component={Posts} />

Now if your URL don’t have a year or month, React will still render Posts component.

๐ŸŒ€ Redirect

It can happen that the customer who is visiting your site may end up writing a wrong URL for a page. So, in this scenario, React has placed a contingency. It is called Redirect. If it is in place, the customer will be redirected to some other page which you preset.

๐Ÿš€ For using this component, add following at the top of your page:

import { Redirect } from "react-router-dom";

๐Ÿ“ฆ And then, you enter the following code in your React app:

<Redirect to="/not-found"/>

There is also something important that you should keep in mind. If you are using the Switch, you need to place the Redirect at just before closing the Switch component.

I will not explain why you should place Redirect there. Because if I start explaining it, I would need to tell you guys what Switch component does. And right now, I can’t because I need to wrap this blog.

If I do not write tomorrow, then you guys will surely hear from me the day after tomorrow. Till then, cheerios. ๐Ÿคž