react router dom browserrouter vs router

We need to configure our web server to respond with our React application regardless of the exact route for it to work. Even though we have defined a route using React Router, the web server we use to host our application might not know about it.Īccessing the https : //app.com/posts route might lead to the 404 Not Found error. This means that even if we develop a single-page application, the browser sends the whole URL to the server. We can notice that those URLs no longer contain the hash character. The above code creates two routes for us: We’ve been able to change the URL with JavaScript for quite some time now. With the History API, we have a straightforward way of manipulating the browser history with JavaScript. It is built with the use of the History API in mind. The alternative to the above solution is the browser router. Therefore, a hash in the middle might look strange.Īlso, using the hash router might be considered bad for SEO. This is because users are often accustomed to clean and simple URLs.

The issue with the hash routing is the fact that it looks a little out of place. Thanks to that, the configuration is very straightforward.

The main selling point of the hash routing is that the browser doesn’t send the information about the route to the web server. If for some reason, you target very old browsers, you should use an older version of the React Router. This means that we will experience issues with Internet Explorer 9 and older. This is due to the use of the History API. The upcoming v6.0.0 will use a version of the history library that does not support old browsers anymore. Under the hood, React Router uses the history library. Doing the above creates two routes for us:

React router dom browserrouter vs router