为什么单击链接时我的 react/webpack 应用程序会刷新？

Question

我有一个react 应用程序，我正在使用webpack 构建chunks。我正在使用express 服务器提供所有服务。当我单击link 时，我希望将script 标签添加到index.html。我希望这会下载文件而不是刷新页面。

这是我的server.js：

app.use(express.static('./dist'));

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/dist/index.html');
});

var server = app.listen(3000, function () {
  console.log("Listening on 3000");
}

这是我的webpack.config：

module.exports = {
    entry: {
        app: './App.js',
        vendors: vendors
    },
    output: {
        filename: './bundle.[hash].js',
        chunkFilename: './[id].[hash].js',
        path: __dirname + '/dist'
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /(node_modules)/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015']
                }
            }
        ]
    },
    plugins: [
            new HtmlWebpackPlugin({
                template: 'index.ejs'
            }),

        new CommonsPlugin({
            name: 'vendors',
            filename: 'vendors.js',
            minChunks: Infinity
        })
    ]
};

这里是App.js，一切都从这里开始：

const rootRoute = {
    component: 'div',
    childRoutes: [ {
        path: '/',
        component: Main,
        childRoutes: [
            require('./routes/reports')
        ]
    } ]
};

render(
    <Router history={browserHistory} routes={rootRoute} />, document.getElementById('app')
);

最后在我的Main.js 组件中有链接：

class Main extends React.Component {
    render() {
        return (
                <div>
                    <Link href="/reports">Reports</Link>
                    <div>
                        {this.props.children || <Home /> }
                    </div>
                </div>
        )
    }
}

export default Main;

该页面可以正常工作，但是当我单击Main 中的reports 链接时，我的页面会刷新，而不仅仅是插入新代码。我做错了什么？

编辑：

这里是“路线/报告”

module.exports = {
    path: 'reports',
    getComponents(location, cb) {
        require.ensure([], (require) => {
            cb(null, require('./components/Reports'))
        })
    }
}

还有Reports 组件：

class Reports extends React.Component {
    render() {
        return (
                <div>
                    <h2>Reports</h2>
                </div>
        )
    }
}

module.exports = Reports;

Answer 1

代替

<Link href="/reports">Reports</Link>

做

<Link to="/reports">Reports</Link>