How to configure a basename in React Router 3.x

Question

I have an app running at a nested url as opposed to the root. Lets say example.com/app.

I read here that in react router 2.x you could configure basenames.

How can this be done in react router 3.x?

FYI I am also using the react-router-redux package.

Answer 1

This functionality does not exist in React Router anymore. I went through a similar problem and found this fix.

Step 1: Install History (3.0.0)

npm install --save history@3.0.0

Step 2: Import { useBasename } from history in your router file (the file with <Router>):

import { useBasename } from 'history'

Step 3: Modify your <Router> like the below example:

<Router history={ useBasename(() => browserHistory)({ basename: '/app' }) }>

Answer 2

I think the section on configuring histories in the React Router docs is what you're looking for:

https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md#customize-your-history-further

Here's a full example integrating with react-router-redux (with some unnecessary info excluded):

import React from 'react';
import ReactDOM from 'react-dom';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import { useRouterHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';

import Root from './containers/Root';
import configureStore from './store/configureStore';

const historyConfig = { basename: '/some-basename' };
const browserHistory = useRouterHistory(createBrowserHistory)(historyConfig);

const store = configureStore({ initialState, browserHistory });
const history = syncHistoryWithStore(browserHistory, store, {
  selectLocationState: (state) => state.router,
});

ReactDOM.render(
  <Root history={history} store={store} />,
  document.getElementById('root')
);