React-redux-starter-kit: does not work from sub folder

[mouhsinelonly]

when using the kit from a sub folder only a blank page is rendered

[bhj]

@mouhsinelonly Does #880 help?

[mouhsinelonly]

no it does not work , it worked before removing
const browserHistory = useRouterHistory(createBrowserHistory)({
basename : BASENAME
})

in commit : 4ecc655ae7c5db83e6c3edffd7456a667191bf2e

[davezuko]

@mouhsinelonly if you need to add a custom basename to the router you can still do so, but it will require importing the history package and configuring the basename as you pointed out above. I removed this explicit dependency as it was superfluous to the majority of use cases.

[fdlk]

@davezuko I just tried to get the starter pack up and running hosted on a specific page of my java application. That took me about half an hour of puzzling and debugging WITH the boilerplate already in place. (I'd forked the starter pack before commit 4ecc655) If I hadn't found the BASENAME, I strongly suspect I'd have had to hack it into place, breaking the dev server.

"Just import the history and configure the basename" is nontrivial for someone doing their first deploy.

[simonedavico]

@davezuko I am trying to achieve the same as you suggested, but it somehow breaks routing. This is what I did:

• Create a apphistory.js module where I create my custom history:

const historyConfig = {
  basename: __BASENAME__
};
export const appHistory = useRouterHistory(createBrowserHistory)(historyConfig);
export default appHistory

• Set it on Router by passing it as a prop to AppContainer :

  render () {
    const { routes, store, history } = this.props;

    return (
      <Provider store={store}>
        <div style={{ height: '100%' }} className="app">
          <Router history={history} children={routes} />
        </div>
      </Provider>
    )
  }

• Configured the same history in createStore.js:

import appHistory from '../apphistory'

//...

store.unsubscribeHistory = appHistory.listen(updateLocation(store))

Result: the app runs without errors in console, but the router doesn't seem to work (and thus I get a blank page). Can you spot any mistake in the snippets above? I don't have a lot of experience with history and react-router, so I'm at loss...

N.B: BASENAME is set to empty string.

EDIT: I fixed it. I was using version 4.x of the history library, that doesn't play well with react-router. Removing the dependency and using the transitive dependency introduced by react-router (i.e. version 2.x) fixed the problem.

[jenyckee]

Someone got this working so far?

[simonedavico]

@jenyckee yes, I got it working with the approach described in my previous comment.

[jenyckee]

I tried to reimplement it as it used to be in commit https://github.com/davezuko/react-redux-starter-kit/commit/4ecc655ae7c5db83e6c3edffd7456a667191bf2e but my page just stays blank without any errors about routes that do not match.

I do

useRouterHistory(createBrowserHistory)({
 basename : __BASENAME__
})
console.log('basename:', __BASENAME__, browserHistory)

The basename is indeed set but it seems that the routing does not take it into account since any other routes give me a 404.

[amergin]

Is there a complete code base that would demonstrate this config? I would really need this setup working.

[simonedavico]

@amergin calling useRouterHistory to create a custom history as showed above it's really all there is to it. You only have to be careful to create it as a singleton.

[amergin]

@simonedavico: a total newbie here, but you said that the history library you used cause you some issues. Yet in the code above createBrowserHistory is imported by import createBrowserHistory from 'history/lib/createBrowserHistory'? Which specific version of history did you settle on using, that didn't cause you issues?

[jenyckee]

It seems like the problem is indeed with the version of history i.e. 4.3.0 in my case. Any workaround other than using an older version? And if not how would I use the transitive dependency?

[simonedavico]

@amergin yes, you import createBrowserHistory from that path.
Then, you create a custom history in a module you create (e.g., apphistory.js):

const historyConfig = {
  basename: __BASENAME__
};

export const appHistory = useRouterHistory(createBrowserHistory)(historyConfig);

export default appHistory

Now, you use this history instead of the default one. In AppContainer.js:

import appHistory from '../apphistory'

  render () {

    const { routes, store } = this.props;

    const onError = (error) => {
      console.log('Router error',  error)
    };

    return (
      <Provider store={store}>
        <div className="stqts">
          <Router history={appHistory} children={routes} onError={onError}/>
        </div>
      </Provider>
    )
  }

Don't forget to set __BASENAME__. I set it in my package.json like this:

    "deploy:prod": {
      "command": "npm run deploy",
      "env": {
        "NODE_ENV": "production",
        "DEBUG": "app:*",
        "BASENAME": "/stqts/"
      }
    },

@jenyckee Removing the explicti history listed in the dependencies in package.json did the trick for me. Calling npm list history reports I have installed react-router version 2.8.1 and transitively history version 2.1.2.

[ajainvivek]

I am facing the same issue while deploying on sub folder. The app loads with blank page. Tried setting basename to '/sub/' and compiler_public_path to '/sub/' but no luck.

[brianzinn]

@ajainvivek I followed the steps above and it worked for me. I'll add a couple more steps in case that helps. I needed to install history 3.2.1, since it was the history referenced from react-router 3.0.2. Installing latest version of history gives errors like "getCurrentLocation is not a function" (blank page, but console error was helpful!).

src/appHistory.js
Note

1. The newer version of history doesn't have /lib/)
2. __BASENAME__is set in package.json "deploy:prod"

import { useRouterHistory } from 'react-router'
import createBrowserHistory from 'history/lib/createBrowserHistory'

const historyConfig = {
  basename: __BASENAME__
}

export const appHistory = useRouterHistory(createBrowserHistory)(historyConfig)

export default appHistory

config/environments.config.js

production : (config) => ({
    compiler_public_path     : '/directory_name_here/',

In AppContainer.js

1. Remove import for browserHistory from react-router
2. Add import for appHistory file listed above If using same file as simonedavico

import appHistory from '../appHistory'

1. Change Router prop as indicated in previous post by simonedavico

To be honest not sure why this was removed from starter kit, since I would imagine it is helpful for many people. In my case it was needed for gh-pages, which deploys in a subdirectory.

[rojasmi1]

I had the same issue and can confirm that steps provided by @simonedavico worked. Thanks @brianzinn for the extra explanation, you two saved my night.

@davezuko Are the steps above documented somewhere? Maybe FAQ? I'd be really helpful.

BTW, thanks for such a good starter kit 👍