Question

我已定义了几条路线，并且两者都有效，但只有当您按照应用流程进行操作时才会有效。让我解释一下：

我们转到/第一页，页面呈现：一堆指向/ second /：id页面的链接。单击其中一个链接，将显示/ second / myID页面。

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

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

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

如果我点击后退按钮，则网址会更改为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

debug的index.html文件中的相对路径很可能是一个问题。它适用于主页，因为您已经在根URL：bundle.js。但是当你在另一个页面上刷新时，它认为它在根部，这就是你获得404的原因。它最有可能在/而不是bundle.js寻找localhost/second/dist。< / p>

Answer 2

尝试使用hashrouter而不是浏览器路由器，它使您可以在刷新时呈现组件。

React Router v4在刷新

2 个答案: