反应路由器，在 webpack 中使用 historyApiFallback true 重新加载 404答案

【问题标题】：React router, 404 on reload with historyApiFallback true in webpack反应路由器，在 webpack 中使用 historyApiFallback true 重新加载 404
【发布时间】：2017-10-13 11:40:33
【问题描述】：

我正在使用 react-router-bootstrap 和 react-router V4，以及用于开发的 Webpack

我的问题是我创建了 /services/firstService 之类的路径，但在重新加载时它给出了 404

我得到了我的 index.js

ReactDOM.render(
    <Router>
        <App />
    </Router>
    , document.getElementById('container'));

然后是我的 App.jsx，这是我的“主要”组件

export default class App extends React.Component {
    render() {
        return (
            <div>
                <Navigation/>
                <div className="content">
                    <Route exact={true} path="/" component={Home}/>
                    <Route exact={true} path="/home" component={Home}/>
                    <Route path="/services" component={Services}/>
                    <Route path="/infos" component={Infos}/>
                    <Route path="/contacts" component={Contacts}/>
                    <Route path="/basic" component={BasicComponent}/>
                </div>
            </div>
        );
    }
}

导航组件只是一个 react-router-bootstrap/react-bootstrap 链接

export default class Navigation extends React.Component {
    render() {
        return (
            <Navbar>
                <Nav>
                    <LinkContainer to="/home">
                        <NavItem eventKey={1}>Home</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/services">
                        <NavItem eventKey={2}>Services</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/infos">
                        <NavItem eventKey={3}>Infos</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/contacts">
                        <NavItem eventKey={4}>Contacts</NavItem>
                    </LinkContainer>
                </Nav>
            </Navbar>
        );
    }
}

Services 组件是我想要显示组件 {FirstService} 并将路径更改为 /services/firstService 的地方，对于 secondService 也是如此

export default class Services extends React.Component {
    constructor(props) {
        super( props );
    }

    render() {
        return (
            <div>
                ul/li
                <Link to={`${this.props.match.url}/firstService`}>
                    firstService
                </Link>
                <Link to={`${this.props.match.url}/firstService`}>
                    firstService
                </Link>
                ul/li
                <Route path={`${this.props.match.url}/firstService`} component={FirstService}/>
                <Route path={`${this.props.match.url}/secondService`} component={SecondService}/>
            </div>
        );
    }
}

由于它是另一个组件，this.props 需要在 match.url 前面（这是我的第一个问题）

但是现在，如果我重新加载页面，我会收到以下消息：

'GET localhost:8080/services/index_bundle.js 404 (Not Found)'

我的 webpack.config.js

/*
./webpack.config.js
*/
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: './src/index.html'
})

module.exports = {
    entry: './src',
    output: {
        path: __dirname + "/builds",
        filename: 'index_bundle.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
            { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
            { test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader']}
        ]
    },
    plugins: [HtmlWebpackPluginConfig],
    devServer: {
        historyApiFallback: true
    }
}

【问题讨论】：

标签： reactjs webpack react-router

【解决方案1】：

将 index.html 文件中的包导入从相对路径 <script src="index_bundle.js"></script> 更改为绝对路径 <script src="/index_bundle.js"></script>。当你 GET services 路由时，你的包相对于 url 路径（'/services'）被加载并且无处可寻（404 Not Found）。

【讨论】：

我刚刚注意到一些东西，似乎有东西已经将脚本注入到我的 index.html 中，我现在有两个脚本：<body> <div id="container"/> <script src="/index_bundle.js"></script> <script type="text/javascript" src="index_bundle.js"></script></body> 所以我仍然有一个错误 404 但因为那个是在绝对路径中它可以工作......我不知道脚本是在哪里注入的，所以我无法将其修改为绝对路径
我用那个确切的链接弄明白了，我的小应用程序已经完成，我只需要学习如何在网络上部署 ReactJS 应用程序。

【解决方案2】：

确保在index.html 中设置正确的base tag：<base href="/">

【讨论】：