React Router v4 在刷新时返回 404

Question

我已经定义了几个路由，并且都有效，但只有当您遵循应用程序的流程时。让我解释一下：

我们转到 /first 页面，该页面呈现：一堆指向 /second/:id 页面的链接。您单击其中一个链接，/second/myID 页面出现。

好的，到目前为止一切都很好。

但是后来我对代码进行了更改，在控制台中出现了这个错误： GET http://localhost:8081/second/dist/bundle.js

网络选项卡显示 bundle.js 为 404。如果我刷新页面，我会得到同样奇怪的 /second/dist/bundle.js 404.

如果我点击后退按钮，URL 会变为 http://localhost:8081/first，但页面不会出现。如果我在这里刷新，页面会正常显示。

这是我的 index.js:

class App extends React.Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <Route exact path="/" component={Main} />
                    <Route path="/first" 
                        render={ () => <First 
                                idCards={idCards}
                            /> 
                        } 
                    />
                    <Route path="/second/:id"
                        render={ ({match}) => {
                                return (<Second 
                                    id={match.params.id}
                                />);
                            }
                        } 
                    />
                </div>
            </BrowserRouter>
        );
    }
}

这是我的第一个组件：

export default class First extends React.Component {

    render() {
        return (
            <div className="first">
                {this.props.idCards.map((card, index) => (
                    <Second key={index} {...card} />
                ))}
            </div>
        );
    }
};

这是第二部分：

export default class Second extends React.Component {
    render() {
        return (
            <h1>{`ID: '${this.props.id}'`}</h1>
        );
    }
}

还有我的webpack.config.js：

var path = require('path');

const DEV = process.env.NODE_ENV === 'dev';
const PROD = process.env.NODE_ENV === 'prod';

module.exports = {
    devtool: 'source-map',
    entry: './src/index.js',
    module: {
        loaders: [{
            test: /\.js$/,
            loaders: ['babel-loader'],
            exclude: /node_modules/
        },{
            test: /\.(png|jpg|gif)$/,
            loaders: ['url-loader'],
            exclude: /node_modules/
        },{
            test: /\.(css|sass|scss)$/,
            use: ['style-loader', 'css-loader?importLoaders=2', 'sass-loader'],
            // exclude: /node_modules/
        },{
            test: /\.(svg)$/,
            use: ['file-loader'],
            // exclude: /node_modules/
        },
        {
            test: /\.(otf)(\?.*)?$/,
            loader: 'url-loader?limit=10000&mimetype=application/font-sfnt'
        }]
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: '/dist/',
        filename: 'bundle.js'
    }
}

我的问题是：为什么我会收到 /second/dist/bundle.js 的奇怪请求？

Answer 1

这很可能是 bundle.js 的 index.html 文件中的相对路径问题。它在主页上有效，因为您已经在根 url: /。但是当您在不同的页面上刷新时，它认为它位于根目录，这就是您获得 404 的原因。它很可能在 localhost/second/dist 而不是 localhost/dist 寻找 bundle.js。

Answer 2

尝试 hashrouter 而不是浏览器路由器，它允许您在刷新时呈现组件。

React Router v4 在刷新时返回 404

React Router v4 returning 404 on refresh

reactjs

react-router-v4