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.