Express 当我点击链接时,为什么我的react/webpack应用程序会刷新?

Express 当我点击链接时,为什么我的react/webpack应用程序会刷新?,express,reactjs,webpack,Express,Reactjs,Webpack,我有一个react应用程序,我正在使用webpack构建块。我用express服务器提供所有服务。当我点击链接时,我希望脚本标记被添加到index.html。我希望这是下载文件,而不是刷新页面 这是我的server.js: app.use(express.static('./dist')); app.get('/', function (req, res) { res.sendFile(__dirname + '/dist/index.html'); }); var server = a

我有一个
react
应用程序,我正在使用
webpack
构建
。我用
express
服务器提供所有服务。当我点击
链接时,我希望
脚本
标记被添加到
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的
App.js
,一切都从这里开始:

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

render(
    <Router history={browserHistory} routes={rootRoute} />, document.getElementById('app')
);
页面正常工作,但当我单击
中的
报告
链接时,我的页面将刷新,而不仅仅是插入新代码。我做错了什么

编辑:

这是“路线/报告”

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

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

module.exports = Reports;
类报告扩展了React.Component{
render(){
返回(
报告
)
}
}
module.exports=报告;
而不是

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

报告

需要('./routes/reports')
。那是什么样子的?页面刷新的一个可能原因是
/reports
url与路由器中的任何内容都不匹配。两者之间的区别是什么?不是
只是创建一个
href
?我查看了react路由器的源代码。如果您只是将
href
而不是
传递到
,那么它将只是一个简单的锚,不会传递,在您的情况下,它不会执行
推送状态
(例如,锚上不会有任何javascript管理历史)
<Link href="/reports">Reports</Link>
<Link to="/reports">Reports</Link>