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.
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.
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.
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.
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.