react-router-redux webpack dev服务器historyApiFallback失败

Question

在webpack配置文件中启用historyApiFallback并重新启动服务器后，当更改位置路径名时，浏览器会刷新，导致外部元素重新挂载（我的意思是，我可以看到它闪烁白色并恢复正常）什么时候这应该只发生在嵌套的.props.children上。希望这是有道理的！ 在我的特定情况下，有一个始终位于顶部的<Navbar />元素和一个具有{this.props.children}的容器。我想知道发生了什么事？

App入口点：

    import React from 'react';
import ReactDOM from "react-dom";
import { Router, browserHistory } from 'react-router';
import routes from './routes';
import { syncHistoryWithStore } from 'react-router-redux'
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import promise from 'redux-promise';
import reducers from './reducers';
import thunk from 'redux-thunk';

// const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
// const store = createStoreWithMiddleware(reducers);
const store = createStore(
    reducers,
    applyMiddleware(thunk)
);
const history = syncHistoryWithStore(browserHistory, store);

ReactDOM.render(
    <Provider store={ store }>
        <Router history={ history } routes={ routes } />
    </Provider>,
    document.getElementById('app')
);

webpack配置文件：

var path = require("path");
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    historyApiFallback: true,
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/dev-server',
        './src/js/index.js'
    ],
    output: {
        path: __dirname + '/static',
        filename: "index_bundle.js"
    },
    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loaders: ["react-hot-loader", "babel-loader"] },
            { test: /\.scss$/, loader: 'style!css!sass' },
            { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader' }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: __dirname + '/src/' + 'index.html',
            filename: 'index.html'
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],
    resolve: {
        root: path.resolve(__dirname),
        extensions: ['', '.js'],
        alias: {
            "TweenLite": "src/libs/gsap/TweenLite",
            "CSSPlugin": "src/libs/gsap/plugins/CSSPlugin"
        }
    }
};

主包装/容器：

import React, { Component } from 'react';
import Navbar from '../containers/navbar';
import ModalWindow from '../components/modalWindow';

// include the stylesheet entry point
require('../../sass/app.scss');

class App extends Component {
    render() {
        return (
            <div className="app">
                <Navbar />
                <main>
                { this.props.children }
                </main>
                <ModalWindow />
            </div>
        );
    }
}

export default App;

路由器配置文件：

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './containers/app';
import InitialScreen from './containers/initialScreen';
import Reservation from './containers/reservation';

const routes = (
    <Route path='/' component={ App }>
        <IndexRoute component={ InitialScreen } />
        <Route path='your-trolley' component={ Reservation } />           
    </Route>
);

export default routes;

到目前为止，我认为webpack dev配置文件有问题。任何建议或提示都表示赞赏！

随机用户询问位置是如何变化的，所以这是动作：

export function fetchReservationData(reservation_code, onError) {

    return (dispatch) => {
        fetch(apiConfig.find_my_product)
            .then(function(response) {

                if (response.ok) {

                    response.json().then(function (data) {
                        if (data.trolley.length > 0) {
                            dispatch({ type: UPDATE_TROLLEY_DATA, payload: data });
                            // todo: use router-redux push instead
                            window.location.pathname = '/your-trolley';

                        } else {
                            dispatch({ type: TOGGLE_MODAL_WINDOW, payload: onError });                          
                        }
                    });

                } else {

                    // todo: handle exception
                    console.log('Network response was not ok.');
                    dispatch({ type: TOGGLE_MODAL_WINDOW, payload: onError });

                }

            })
            .catch(function (error) {

                // todo: handle error
                // handle it gracefully asked user to try again, if the problem keeps ocurring to
                // talk with a staff member to report it to the backend team
                console.log('There has been a problem with your fetch operation: ' + error.message);
                dispatch({ type: TOGGLE_MODAL_WINDOW, payload: onError });

            });
    }

}

这是问题所在;如果我更改了应用程序入口点，它可以工作：

import React from 'react';
import ReactDOM from "react-dom";
import { Router, browserHistory } from 'react-router';
import routes from './routes';
import { syncHistoryWithStore, routerMiddleware, push } from 'react-router-redux'
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import promise from 'redux-promise';
import reducers from './reducers';
import thunk from 'redux-thunk';

// const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
// const store = createStoreWithMiddleware(reducers);
const store = createStore(
    reducers,
    applyMiddleware(thunk),
    applyMiddleware(routerMiddleware(browserHistory))
);
const history = syncHistoryWithStore(browserHistory, store);

setTimeout(() => {
    store.dispatch(push('/your-trolley'));
}, 3000);

ReactDOM.render(
    <Provider store={ store }>
        <Router history={ history } routes={ routes } />
    </Provider>,
    document.getElementById('app')
);

所以现在我需要能够像在入口点那样从动作中发送推送。这有点令人困惑，因为我正在向商店提供中间件，然后商店与browserhistory同步，我想我需要在两种情况下传递applyMiddleware（routerMiddleware（browserHistory））的返回值（createstore和sunchistorywithstore ）？！

Answer 1

由于您使用react-router并且不希望浏览器每次切换到新网址时重新加载整个网页，因此使用 {{非常重要1}} 组件由<Link>提供或创建您自己的组件版本。

要在不同页面之间进行链接，您可以

react-router

然后你在import { Link } from 'react-router'; 函数中使用它，就像

一样使用它

render

如果您想以编程方式将用户重定向到不同的网址/位置

<Link to="/user/profile">Goto Profile Page</Link>
<Link to="/">Homepage</Link>

修改：如果您想使用import { browserHistory } from 'react-router'; let doSomething = () => { // do something browserHistory.push('/user/profile'); } 提供的push方法进行重定向，您可以执行以下操作

react-router-redux