Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Configuring app's basename in react-router

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?

like image 935
Ilya Ayzenshtok Avatar asked Jan 03 '17 09:01

Ilya Ayzenshtok


People also ask

What is basename in react router?

basename: stringThe base URL for all locations. If your app is served from a sub-directory on your server, you'll want to set this to the sub-directory. A properly formatted basename should have a leading slash, but no trailing slash.

What is difference between BrowserRouter and HashRouter?

HashRouter: When we have small client side applications which doesn't need backend we can use HashRouter because when we use hashes in the URL/location bar browser doesn't make a server request. BrowserRouter: When we have big production-ready applications which serve backend, it is recommended to use <BrowserRouter> .


2 Answers

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 :-)

like image 81
davey Avatar answered Nov 10 '22 09:11

davey


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.

  1. <Link to='/friends'>Friends</Link> will navigate to /friends internally, but the URL in the location bar will be /users/friends.
like image 21
Paul S Avatar answered Nov 10 '22 08:11

Paul S