Basename not working connected-react-router

Question

I'm using connected-react-router with my react redux app. I need server side rendering and client side rendering (I'm using a react component in a symfony twig template via limenius react bundle).

My probleme is that i cannot use basename properly. I have a locale isocode in my URL (www.localhost.com/fr/mypage)

If i declare a basename '/fr/' in history:

<Route exact path={`/${isocode}/checkout/customize`} component={Customize} />

works !

... but I want this :

<Route exact path="checkout/customize" component={Customize} />

and it does not work !

What i have in my app.js:

export const App = () => {
  const store = ReactOnRails.getStore('CustomizeStore');
  const state = store.getState();
  const { isocode } = state.general.data.locale;
  const history = createHistory({
    basename: `/${isocode}/`,
    initialEntries: [state.router.location.pathname],
  });

  return (
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Switch>
          <Route exact path={`/${isocode}/checkout/customize`} component={Customize} />
        </Switch>
      </ConnectedRouter>
    </Provider>
  );
};

and in my store.js

export const createHistory = historyConfig =>
  isServer ? createMemoryHistory(historyConfig) : createBrowserHistory();

export default (props, context) => {
  const { baseURL } = props.general.data.api;
  const { isocode } = props.general.data.locale;
  const history = createHistory({ basename: `/${isocode}/`, initialEntries: [context.pathname] });

  return createStore(
    reducers(history),
    { ...props },
    composeEnhancers(
      applyMiddleware(thunk, routerMiddleware(history)),
    ),
  );
};

---

What i expect in my app.js:

<Provider store={store}>
  <ConnectedRouter history={history}>
    <Switch>
      <Route exact path="checkout/customize" component={Customize} />
    </Switch>
  </ConnectedRouter>
</Provider>

I've read that the basename for "browserRouter" and "staticRouter" provided by react-router should be declared in history props of ConnectRouter component.

What I'm doing wrong ? Is connect-react-router a good choice for my redux ssr application or should i use react-router ? (I'm using immutable.js and i want to implement hot-reloading if possible =)

A big thanks !

Answer 1

I faced the same problem a few days ago and I solved it by setting the basename in the createBrowserHistory, like this:

const history = createBrowserHistory({ basename: “/baseName” })