App does not render when using browserHistory instead of hashHistory in React Router

Question

I am using React Router in my current project:

const store = Redux.createStore(bomlerApp);
const App = React.createClass({
    render() {
        return (
            React.createElement('div', null,
                this.props.children
            )
        )
    }
})
var rootElement =
    React.createElement(ReactRedux.Provider, {store: store},
        React.createElement(ReactRouter.Router, {history: ReactRouter.browserHistory},
            React.createElement(ReactRouter.Route, { path: '/', component: App },
                React.createElement(ReactRouter.IndexRoute, { component: Home })
            )
        )
    )
ReactDOM.render(rootElement, document.getElementById('react-app'));

This does not work. The app does not render at all and I don't get any error messages.

However, if I use ReactRouter.hashHistory instead, the app works.

What am I not understanding here?

Answer 1

• Server Configuration: the browser history setup can generate real looking urLs without reloading the page. But what happens if the user refreshes or bookmarks on a deep nested urL? these urLs are dynamically generated at the browser; they do not correspond to real paths on the server, and since any urL will always hit the server on the first request, it will likely return a page not Found error.

• To implement the browser history setup, you need to import the createBrowserHistory method from the History library. You can then invoke it, passing the generated browser history configuration as the history prop of the Router component

• ***> to work with browser history setup, you need to make rewrite

  configurations on your server, so when the user hits /some-path on the browser, the server will serve index page from where react router will render the right view.***