Configuring app's basename in react-router

Question

I'm struggling a bit with react-router 2.x configuration, specifically app basename.

I've an application which may have different base root throughout its lifecycle. For instance:

• / in development
• /users in production
• /account in production after migration

The basename comes into play in several places:

• static asset compilation in Webpack
• react-router main configuration
• specifying redirect routes in redux actions
• providing something like redirectUrl to API calls

My current solution is to have an ENV variable and make it available both to Webpack and to the app itself by injecting window.defs via an Express server, but I still end up having things like ${defs.APP_BASENAME}/signin in way too many places throughout the app.

How can I abstract the app base, or at least tuck it away in a single location? I should be able to specify the base route in Router's config, and then simply use relative routes somehow, right? Or am I missing something?

Answer 1

You can decorate your history with a basename. You could mix this with a DefinePlugin in your Webpack configuration to specify which basename should be used.

// webpack.config.js
new Webpack.DefinePlugin({
  BASENAME: '/users'
})

// somewhere in your application
import { useRouterHistory } from 'react-router'
import { createHistory } from 'history'

const history = useRouterHistory(createHistory)({
  basename: BASENAME
})

Given the basename: /users, React Router will ignore the /users at the beginning of the pathname so:

1. The URL /users is internally matched by the path /

2. The URL /users/profile matches the path /profile.

Similarly, you do not have to append the basename to the path when you are navigating within your application.

3. <Link to='/friends'>Friends</Link> will navigate to /friends internally, but the URL in the location bar will be /users/friends.

Answer 2

Try this it will work

import { createBrowserHistory } from 'history';

const history = createBrowserHistory({
  basename: 'base-name'
}) 

<Router history={history}>
</Router>

Answer 3

In React Router V6.

Edit package.json and add homepage : Directory name key value as follows

"homepage" : "https://blog.sangw.in/react-student-management",

OR

"homepage" : "/react-student-management", 

and on Routers BrowserRouter add basename : Directory name as follows

<BrowserRouter  basename={'/react-student-management'}>

and you are done.

Visit https://blog.sangw.in/react-student-management and app will be deployed and working.

Answer 4

Today I ran into the same issue: On my localhost I let an NGINX serve the stuff in the root context, but on my prod server, an Apache serves the stuff from a subdirectory...

Inspired by the answer from Paul S and inspired by the infos here: https://github.com/ReactTraining/react-router/issues/353

I got the for me working solution:

In the Webpack config file I defined a plugin for my localhost dev env:

  plugins: [
    new webpack.DefinePlugin({
      BASENAME: JSON.stringify("/")
    })
  ],

In the Webpack PROD config file I defined a plugin for my prod env in a subfolder, i.e. www.example.com/users:

  plugins: [
    new webpack.DefinePlugin({
      BASENAME: JSON.stringify("/users/")
    }),

And in my react-router definitions I just reference:

import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import { useBasename } from 'history'
...
<Router history={useBasename(() => browserHistory)({ basename: BASENAME })}>

For me a very elegant solution and easy too. It just cost me around five hours of looking around :-)