Rest service and browserHistory error from ReactJS

Question

I'm working on my first java APP. It is Rest service. It's Spring-boot with WEB, REST, JPA, THYMELEAF and MYSQL. This Api works. I wanted add some User Interface. I have choosen ReactJS. Followed some tutorial I made other app for creating UI. The main Index.js looks like:

import React from "react";
import {render} from "react-dom";
import {Router, Route, browserHistory, IndexRoute} from "react-router";

import {Root} from "./Root"
import {BWelcome} from "./components/BWelcome"
import {BEmployee} from "./components/BEmployee"
import {BWorkNumber} from "./components/BWorkNumber"
import {BBrigadeNumber} from "./components/BBrigadeNumber"
// end::vars[]

// tag::app[]
class App extends React.Component {
    render() {
        return(
        <Router history={browserHistory}>
            <Route path={"/"} component={Root}>
                <IndexRoute component={BWelcome} />
                    <Route path={"employee"} component={BEmployee} />
                    <Route path={"worknumber"} component={BWorkNumber} />
                    <Route path={"brigadenumber"} component={BBrigadeNumber} />
            </Route>
        </Router>
        );
    }
}

render(
    <App />,
    window.document.getElementById('app')
)

and it works fine. Until I've moved all this UI into my main APP. I suppose the problem is about browserHistory. In tutorial (and my additional app for UI only) there was running in webpack: webpack-dev-server --content-base src/ --inline --history-api-fallback. I don't understant exacly meaning of --history-api-fallback but I understand it's connected with browserHistory. In other words - browserHistory won't be running without --history-api-fallback. In my main APP I haven't webpack-dev-server and a can't call --history-api-fallback. How can I replace this property in my main project?

My errors from browser:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `App`.
printWarning @ warning.js?8a56:36
warning @ warning.js?8a56:60
createElement @ ReactElementValidator.js?a599:171
render @ index.js?5604:21
(anonymous) @ ReactCompositeComponent.js?d2b3:796
measureLifeCyclePerf @ ReactCompositeComponent.js?d2b3:75
_renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js?d2b3:795
_renderValidatedComponent @ ReactCompositeComponent.js?d2b3:822
performInitialMount @ ReactCompositeComponent.js?d2b3:362
mountComponent @ ReactCompositeComponent.js?d2b3:258
mountComponent @ ReactReconciler.js?399b:46
performInitialMount @ ReactCompositeComponent.js?d2b3:371
mountComponent @ ReactCompositeComponent.js?d2b3:258
mountComponent @ ReactReconciler.js?399b:46
mountComponentIntoNode @ ReactMount.js?26a9:104
perform @ Transaction.js?f15f:140
batchedMountComponentIntoNode @ ReactMount.js?26a9:126
perform @ Transaction.js?f15f:140
batchedUpdates @ ReactDefaultBatchingStrategy.js?e9be:62
batchedUpdates @ ReactUpdates.js?8e6b:97
_renderNewRootComponent @ ReactMount.js?26a9:320
_renderSubtreeIntoContainer @ ReactMount.js?26a9:401
render @ ReactMount.js?26a9:422
(anonymous) @ index.js?5604:31
(anonymous) @ bundle.js:5603
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:66
(anonymous) @ bundle.js:69
warning.js?8a56:36 Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`.
    in Router (created by App)
    in App
printWarning @ warning.js?8a56:36
warning @ warning.js?8a56:60
checkReactTypeSpec @ checkReactTypeSpec.js?d08c:80
validatePropTypes @ ReactElementValidator.js?a599:151
createElement @ ReactElementValidator.js?a599:194
render @ index.js?5604:18
(anonymous) @ ReactCompositeComponent.js?d2b3:796
measureLifeCyclePerf @ ReactCompositeComponent.js?d2b3:75
_renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js?d2b3:795
_renderValidatedComponent @ ReactCompositeComponent.js?d2b3:822
performInitialMount @ ReactCompositeComponent.js?d2b3:362
mountComponent @ ReactCompositeComponent.js?d2b3:258
mountComponent @ ReactReconciler.js?399b:46
performInitialMount @ ReactCompositeComponent.js?d2b3:371
mountComponent @ ReactCompositeComponent.js?d2b3:258
mountComponent @ ReactReconciler.js?399b:46
mountComponentIntoNode @ ReactMount.js?26a9:104
perform @ Transaction.js?f15f:140
batchedMountComponentIntoNode @ ReactMount.js?26a9:126
perform @ Transaction.js?f15f:140
batchedUpdates @ ReactDefaultBatchingStrategy.js?e9be:62
batchedUpdates @ ReactUpdates.js?8e6b:97
_renderNewRootComponent @ ReactMount.js?26a9:320
_renderSubtreeIntoContainer @ ReactMount.js?26a9:401
render @ ReactMount.js?26a9:422
(anonymous) @ index.js?5604:31
(anonymous) @ bundle.js:5603
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:66
(anonymous) @ bundle.js:69
Router.js?a4aa:36 Uncaught TypeError: Cannot read property 'location' of undefined
    at new Router (eval at <anonymous> (bundle.js:1507), <anonymous>:36:52)
    at eval (eval at <anonymous> (bundle.js:4379), <anonymous>:295:18)
    at measureLifeCyclePerf (eval at <anonymous> (bundle.js:4379), <anonymous>:75:12)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (eval at <anonymous> (bundle.js:4379), <anonymous>:294:16)
    at ReactCompositeComponentWrapper._constructComponent (eval at <anonymous> (bundle.js:4379), <anonymous>:280:21)
    at ReactCompositeComponentWrapper.mountComponent (eval at <anonymous> (bundle.js:4379), <anonymous>:188:21)
    at Object.mountComponent (eval at <anonymous> (bundle.js:605), <anonymous>:46:35)
    at ReactCompositeComponentWrapper.performInitialMount (eval at <anonymous> (bundle.js:4379), <anonymous>:371:34)
    at ReactCompositeComponentWrapper.mountComponent (eval at <anonymous> (bundle.js:4379), <anonymous>:258:21)
    at Object.mountComponent (eval at <anonymous> (bundle.js:605), <anonymous>:46:35)

Answer 1

historyApiFallback option tell webpack to return the index.html page and then all the routing is done from there and hence with browserHistory it is very much needed.

If you have a webpack.config.js configured in your project which should be very helpful to set up babel and other loaders then you can configure historyApiFallback in it like

module.exports = {


 entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    },
    devServer: {historyApiFallback: true}
};

If you don;t have webpack then you can use hashHistory . Houwever if you use it your routes will like

http://localhost:8080/#/employee