來自ReactJS的休息服務和瀏覽器歷史錯誤

Question

我正在研究我的第一個Java APP。 這是休息服務。 它是使用WEB，REST，JPA，THYMELEAF和MYSQL的Spring-boot。 這個Api有效。 我想添加一些用戶界面。 我選擇了ReactJS。 接下來我制作了一些用於創建UI的應用程序的教程。 主要的Index.js看起來像：

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')
)

它工作正常。 直到我將所有這些UI移動到我的主APP中。 我想問題是關於browserHistory。 在教程（以及我的僅用於UI的附加應用程序）中，在webpack中運行：webpack-dev-server --content-base src / --inline --history-api-fallback。 我不明白--history-api-fallback的意義，但我知道它與browserHistory有關。 換句話說 - 如果沒有--history-api-fallback，browserHistory將無法運行。 在我的主APP中，我沒有webpack-dev-server而且無法調用--history-api-fallback。 如何在主項目中替換此屬性？

我的瀏覽器錯誤：

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選項告訴webpack返回index.html頁面，然后所有的路由完成從那里，因此與browserHistory它是非常需要的。

如果您在項目中配置了webpack.config.js，這對設置babel和其他加載器非常有幫助，那么您可以在其中配置historyApiFallback

module.exports = {


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

如果你沒有webpack那么你可以使用hashHistory 。 如果你使用它，你的路線會喜歡

http://localhost:8080/#/employee