为什么点击链接时，我的反应/ webpack应用程序会刷新？

我有一个react应用程序，我使用webpack来构建chunks。我正在用express服务器提供所有服务。当我点击link时，我想将script标记添加到index.html。我期待这下载文件，而不是刷新页面。为什么点击链接时，我的反应/ webpack应用程序会刷新？

这里是我的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：在我Main.js组件

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

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

终于来了有链接：

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;

来源

2016-02-12 jhamm

该行'require（'./ routes/reports'）'。这是什么样子？你的页面刷新的一个可能的原因是因为'/ reports' url与路由器中的任何东西都不匹配。 – enjoylife

而不是

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

待办事项

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

来源

2016-02-12 22:51:14 topheman

2的区别是什么？不'只是创建一个'href'？ – jhamm

我回顾了react-router的源代码。如果你只是传递'href'而不是'to'，它将只是一个简单的锚，并且不会传递[here]（https://github.com/reactjs/react-router/blob/master/modules/Link .js＃L97），它不会在你的情况下执行'pushState'（例如，不会有任何JavaScript管理你的锚点上的历史记录） – topheman

为什么点击链接时，我的反应/ webpack应用程序会刷新？

回答

相关问题