Question

我一直在阅读react-router-dom（v4）的所有文档，以及大量的Stack Overflow问题，同样的错误，但是A）他们留下了很多未回答的漏洞而B）他们似乎都是建议只开发修复，所以我希望看到人们在PRODUCTION中为这个简单的场景做了什么，并且C）我可能做了一些愚蠢的事情并且答案对我不起作用，错误“不能GET / about“在控制台中没有错误的渲染。

我正在使用Express，React，Node并使用Webpack进行编译。我可以成功访问我的主页，点击任意链接会将我带到相应的组件，但是手动输入网址会破坏这一点，正如here所述，并且讨论了此错误的原因here。

大多数答案建议在webpack.config.js文件中添加devServer.historyApiFallback = true和output.publicPath = '/'，这意味着我还需要运行npm install --save-dev webpack-dev-server并按照建议使用node_modules/.bin/webpack-dev-server运行它在文档中。完成所有这些，没有任何反应。事实上，现在情况更糟，因为我也无法访问我的家庭路线'/'。

所以在放弃我当前的配置之前，1）我该怎么做才能解决这个问题？ 2）甚至重要吗？ webpack-dev-server显然只是用于开发，那么生产呢？

我的webpack.config.js文件：

var webpack = require('webpack');
var path = require('path');
var envFile = require('node-env-file');

process.env.NODE_ENV = process.env.NODE_ENV || 'development';

try {
    envFile(path.join(__dirname, 'config/' + process.env.NODE_ENV + '.env'))
} catch (e) {
}

module.exports = {
    devServer: {
    historyApiFallback: true,
  },
    entry: [
        'script-loader!foundation-sites/dist/js/foundation.min.js',
        './app/app.jsx'
    ],
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                //you don't get to see this
            }
        })
    ],
    output: {
        path: __dirname,
        filename: './public/bundle.js',
        publicPath: '/'
    },
    resolve: {
        modules: [
            __dirname,
            'node_modules',
            './app/components',
            './app/api'
        ],
        alias: {
            app: 'app',
            applicationStyles: 'app/styles/app.scss',
            actions: 'app/actions/actions.jsx',
            configureStore: 'app/store/configureStore.jsx',
            reducers: 'app/reducers/reducers.jsx'
            ),
        },
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-0']
                },
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/
            },
            {
                loader: 'url-loader?limit=100000',
                test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/
            },
            {
                loader: 'sass-loader',
                test: /\.scss$/,
                options: {
                    includePaths: [
                        path.resolve(__dirname, './node_modules/foundation-sites/scss')
                    ]
                }
            }
        ]
    },
    devtool: process.env.NODE_ENV === 'production' ? false : 'source-map'
};

我的app.jsx：

var React = require('react');
var ReactDOM = require('react-dom');
import {Provider} from 'react-redux';
import {BrowserRouter as Router, Route, Switch, Link, HashRouter} from 'react-router-dom';

import Home from 'Home';
import Watch from 'Watch';
import About from 'About';
import AddShow from 'AddShow';

var store = require('configureStore').configure();
import firebase from 'app/firebase/';

// Load Foundation
$(document).foundation();

// App css
require('style-loader!css-loader!sass-loader!applicationStyles');

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <div>
        <Route exact path="/" component={Home}/>
        <Route path="/watch" component={Watch}/>
        <Route path="/about" component={About}/>
        <Route path="/addshow" component={AddShow}/>
      </div>
    </Router>
  </Provider>,
  document.getElementById('app')
);

Answer 1

您必须设置您的Web服务器（使用react应用程序提供index.html的服务器）将所有请求重定向到您的index.html的URL，以便react-router可以完成其工作。这就是webpack.config.js对webpack-dev-server

所做的建议更改

在webpack.config.js中，您需要启用html插件，以便webpack知道您index.html的位置：

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            //you don't get to see this
        }
    }),
    new HtmlWebpackPlugin({
        template: 'public/index.html' //or wherever your index.html is
    })
],

无法使用react-router v4获取“/ About”（生产帮助）

1 个答案: