If you’ve ever deployed your new React app to a subfolder on your server and you’re using React Router you might notice that React Router starts getting all funky and truncates the subfolder name.  This is the expected behavior, albeit something easy to overlook when deploying to a subfolder.  The good news is that there is a pretty straightforward solution: just add a basepath  to your Router and specify the folder name.

Check out the documentation.

<Router basename="/some/sub/directory/">
  // Other routes here
</Router>

For example, I deploy most of my playground apps to apps.bioramp.com, to deploy the Auto9 app I use a subfolder and the resulting URL is http://apps.bioramp.com/auto9

This is what my Router looks like for that app (keep in mind I import my routes from an external file).

// ... other imports
import { routes } from "./config/routes";

class Auto9 extends React.Component {
  render() {
    return (
      <Router basename="/auto9">
        <div>
            {routes.map((route, index) => (
              <Route
                key={index}
                path={route.path}
                exact={route.exact}
                component={route.component}
              />
            ))}
        </div>
      </Router>
    );
  }
}

Also, keep in the mind that you should have a “homepage” node in your package.json before you a do a build.