How to fix BrowserRouter for React Apps on Apache
Tags: webdev, apache, createreactapp, deployment
Published: 2018-12-01 09:19:55

---
title: How to fix BrowserRouter for React Apps on Apache
published: true
tags: Web Development,Apache,create-react-app,deployment
canonical_url: https://www.andreasreiterer.at/fix-browserrouter-on-apache/
---

While learning React, most people develop and test their apps locally. I mean … they’re just demo apps for learning purposes right? Nobody wants to see stuff like that, so why even think of deploying the apps somewhere?

But then comes the day where you try to deploy a React App to a web server, so you could show it to the people out there: “Look! I made this!”. And that’s how it was for me too.

### Deploying a static React bundle to an Apache web space

I already had a web space, so it was obvious for me to put it up there. Because I used `create-react-app`,  all I had to do was running `npm run build` and copy the contents of my app’s `build` folder to said web space.

**YEAH! After all that hard work I just deployed my first React app!**

I started clicking through several routes and everything seemed fine, until I refreshed the page or tried to access a route directly. I got a 404 error.

![](https://i2.wp.com/www.andreasreiterer.at/wp-content/uploads/2018/11/oopsnotfound.jpg?resize=660%2C92&ssl=1)

**“But it works like a charm locally – why doesn’t it on my web space?”**

Does that sound familiar to you?

### Why is BrowserRouter not working?

Some research brought up several solutions. One of them:

_“Use HashRouter instead of BrowserRouter”_

Okay that would be an easy one. But since I wanted the app to support the browser’s history, that was no option. So let’s dig deeper and have a look at the reason for the error.

When you’re visiting a route of your app directly, e.g. via _https://myapp.com/route/123_ Apache tries to map that URL to a file in the public folder. In this case it looks for _/route/123.html_ which obviously doesn’t exist – therefore the 404 error.

To avoid that, we have to tell Apache to redirect all requests to our _index.html_ so our app can perform some routing magic for that URL.

### Fixing the app’s routing

Now here’s how to finally fix the routing. To tell Apache to redirect requests to _index.html_ where our app lives, we have to modify the _.htaccess_ file. If there is no such file in your app’s folder yet, just create it.

Then be sure that you put in those 4 lines that will magically make your routing work.

```
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
```

After we put that _.htaccess_ file into the same directory as the _index.html_, Apache will redirect each new request directly to your app.

### Bonus: Deploying the React app to a sub directory

If you’re deploying your app into a sub directory, so it’s accessible e.g. via _https://myapp.com/the-app_, you’ll soon notice that there is another issue. Each click to a new route will transform the URL to something like _https://myapp.com/route-abc_ – which will break again after a reload. But there is a simple fix for that:

_BrowserRouter_ has a prop called `basename` where you can specify your sub-directory path:

`<BrowserRouter basename="/the-app">`

From now on, each Route like `/contacts` will result in an URL like _http://myapp.com/the-app/contacts._

### Wrapping up

Today you learned how to fix routing with _BrowserRouter_ for React Apps deployed to Apache. You learned, why you even get the 404 error in the beginning, and that you can overcome that error by redirecting all requests back to _index.html._

The next time you’re facing routing issues with a React App on Apache, head back to this article and try putting the redirect script to the _.htaccess_ file.

Do you know more issues with hosting a static React app on Apache? Leave a comment at the bottom.

### Don't miss my next posts!
Sign up for my [newsletter](https://www.andreasreiterer.at/dev-newsletter/) to get all my future blog posts delivered directly to your inbox! 

* * *

_Photo by [Stef Westheim](https://unsplash.com/photos/ZGH6xd3usAs?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/search/photos/server?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_

The post [How to fix BrowserRouter for React Apps on Apache](https://www.andreasreiterer.at/fix-browserrouter-on-apache/) appeared first on [Andreas Reiterer](https://www.andreasreiterer.at).