Reach Router - An Easy Alternative Way to React Router
Tags: react, javascript, webdev, vscode
Published: 2019-08-17 13:22:33

###Hi Guys Good Day!

I've been using __react-router__ for almost a year now and I have some problems with it mainly because of the reason there's a lot of boilerplate code you have to write not a lot but you know what I'm saying.


####Using React Router
![React Router](https://thepracticaldev.s3.amazonaws.com/i/uux1yxcq6yukpwx0i9dx.png)



####Using Reach Router
![Reach Router](https://thepracticaldev.s3.amazonaws.com/i/tomraiwsvh9278pjcyx1.png)



Ok, First look at the first picture and the second picture. 

The __first__ difference is that we the first pic we have to import two Components __BrowserRouter__ and __Route__. In the second picture, we only import the __Router__ component that __Reach Router__ package provides us. 

The __second__ difference is that in the first pic we use the __Route__ component to specify our configuration routes and used the __render__ method to specify the components that will be used to those routes but in the second pic, we only specify the __path__ property to the component and __Reach Router__ automatically renders the component base on that __path__. Needless to say, we don't necessarily specify the __path__ prop in our component declaration, __Reach Router__ handles that for us. 

The __third__ difference is we don't have an exact prop in our route configurations in the second pic. The __Reach Router__ already knows what component to render base on the URL or path.

Ok, I'm gonna explain some useful components that __Reach Router__ provides us.


####Link
This component has almost the same functionality with the __Link__ component in __React Router__ but has useful differences.
![Link](https://thepracticaldev.s3.amazonaws.com/i/9pvl25zsoukbuf64oigi.png)

This feature is called __relative paths__. We're navigating to the upper route of __/some/nested/route__ so we want to go to __/some/nested__. It's like navigating between different directories in your file system.


###Match
This component basically matches a path to the location and returns a callback if the path rendered is a match or not.
![Match](https://thepracticaldev.s3.amazonaws.com/i/6uek7s62weelf91z7wl7.png)

Basically, what does component does it only renders 
![Match About](https://thepracticaldev.s3.amazonaws.com/i/mbyfjaiinz2orxw83gka.png)
this __JSX__ if the path is __/about__. Otherwise, it renders this JSX
![Not Match About](https://thepracticaldev.s3.amazonaws.com/i/18zn7n8fyyyh93sqh5l9.png)


###Redirect
This component is similar to __React Router's__ Redirect component but the two differences are that we can use a relative path in __Reach Router's__ Redirect.
![Reach Route Redirect](https://thepracticaldev.s3.amazonaws.com/i/2mwro2z72f2h184t3wm5.png)

and the second difference is that this component calls the __componentDidCatch__ lifecycle method in a class component by default so that we can prevent a new tree from rendering and avoid a new location if you want to avoid this you should use the __noThrow__ prop.

![Redirect noThrow](https://thepracticaldev.s3.amazonaws.com/i/vbyu5tq48mcadjacyk9j.png)


###navigate
The __navigate__ prop is almost the same as __history.push__ but the key difference again is that we can navigate using __relative path__.
![navigate](https://thepracticaldev.s3.amazonaws.com/i/ji2hbr4fa4h4p2b0q1zu.png)

If we click the button it navigates to __www.sample.com__.


Btw, this package is written by one of the original authors of the __React Router__ package so give it a try.

####Thanks guys for reading this post.

# Have a Nice Day :smiley:!.