# Deploying React (Router) app to the subfolder on server

DevFeed: [Deploying React (Router) app to the subfolder on server](<https://devfeed.tech/articles/deploying-react-router-app-to-the-subfolder-on-server-37338.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/react-router-subfolder-on-server/>)

Author: Stanko

Published: 2017-01-18T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [React Router](<https://devfeed.tech/topics/react-router.md>), [React](<https://devfeed.tech/topics/react.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>), [implementation](<https://devfeed.tech/topics/implementation.md>), [browser](<https://devfeed.tech/topics/browser.md>), [configuration](<https://devfeed.tech/topics/configuration.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [configuration](<https://devfeed.tech/tags/configuration.md>), [htaccess](<https://devfeed.tech/tags/htaccess.md>), [implementation](<https://devfeed.tech/tags/implementation.md>), [react](<https://devfeed.tech/tags/react.md>), [react-router](<https://devfeed.tech/tags/react-router.md>), [server](<https://devfeed.tech/tags/server.md>), [webpack](<https://devfeed.tech/tags/webpack.md>)

## AI overview

A tutorial on deploying a React Router application in a server subfolder. It presents HashRouter for simpler deployments, BrowserRouter with a basename for preserving browser history, and server fallback configuration for routes that would otherwise return 404 errors.

## Source excerpt

May 2018 - Updated to match React Router v4 API. September 2019 - Updated to match React Router v5 API, added React Create App part. If you ever had to deploy React Router app to the subfolder on the server, you know what the problem is. Routes will get messed up once you upload it to the server. Here are two solutions I use in these cases. Easy way, just use HashRouter # The easiest way to achieve this is to use HashRouter instead of BrowserRouter. import { HashRouter, Route } from 'react-router-dom'; // Then in render <HashRouter> <Route path='/' component={ Home } exact /> <Route path='/about' component={ About } exact /> {/*...*/} </HashRouter> This is the best approach if your subfolder name changes (for example, if folder name is a build version). But you'll have /#/ included in the every URL. If this bothers you, check the second solution. Example of the routes http://yourserver.com/path/to/subfolder/ http://yourserver.com/path/to/subfolder/#/about http://yourserver.com/path/to/subfolder/#/search Hard way, setting base path by hand # If you want to keep browser history implementation, you'll need to change few things. First, we need to update our routes to include full absolute path to the subfolder. Using React Router's basename # As Davis Cabral pointed out in the comments, instead of manually adding publicPath to all routes, it can be achieved by using React Router's basename prop. import { BrowserRouter, Route } from 'react-router-dom'; // Then in render <BrowserRouter basename='/path/to/subfolder/'> <Route path='/' component={ Home } exact /> <Route path='/about' component={ About } exact /> {/*...*/} </BrowserRouter> Doing it by the hand # I define my routes something like this: const publicPath = '/path/to/subfolder/'; export const routeCodes = { HOME: publicPath, SEARCH: `${ publicPath }search`, ABOUT: `${ publicPath }about`, }; // Then you can use them like this // <Route exact path={ routeCodes.ABOUT } component={ About } /> Setting up .htaccess fil