Why does my react/webpack app refresh when I click on a link?

时间:2016-02-12 21:50:01

标签: express reactjs webpack

I have a $msg = ""; $msg .= "Message sent from ZEUS website on date: $date, hour: $time.\n"; $msg .= "Sender name: $name\n"; $msg .= "Subject: $subject\n"; $msg .= "Sender Email: $email\n"; $msg .= "Sender Message: $message\n"; if($type == 'footer-newsletter') { //Validate form from footer if($_REQUEST['foot-news-email']=="") { echo "<div class='alert alert-danger'> <a class='close' data-dismiss='alert'>×</a> <strong>Warning!</strong> Please fill the Email field. </div>"; } else { mail($to,$subject,$msg,"From:".$email); echo "<div class='alert alert-success'> <a class='close' data-dismiss='alert'>×</a> <strong>Thank you!</strong> </div>"; } } else if($type == 'sidebar-newsletter') { //Validate form from footer if($_REQUEST['suscribe-email']=="") { echo "<div class='alert alert-danger'> <a class='close' data-dismiss='alert'>×</a> <strong>Warning!</strong> Please fill the Email field. </div>"; } else { mail($to,$subject,$msg,"From:".$email); echo "<div class='alert alert-success'> <a class='close' data-dismiss='alert'>×</a> <strong>Thank you!</strong> </div>"; } } else if($type == 'contact') { //Validate form from footer if($_REQUEST['contact-name']=="") { echo "<div class='alert alert-danger'> <a class='close' data-dismiss='alert'>×</a> <strong>Warning!</strong> Please fill the Name field. </div>"; } else if($_REQUEST['contact-email']=="") { echo "<div class='alert alert-danger'> <a class='close' data-dismiss='alert'>×</a> <strong>Warning!</strong> Please fill the Email field. </div>"; } else { mail($to,$subject,$msg,"From:".$email); echo "<div class='alert alert-success'> <a class='close' data-dismiss='alert'>×</a> <strong>Thank you!</strong> </div>"; } } else if($type == 'comments') { //Validate form from footer if($_REQUEST['comments-name']=="") { echo "<div class='alert alert-danger'> <a class='close' data-dismiss='alert'>×</a> <strong>Warning!</strong> Please fill the Name field. </div>"; } else if($_REQUEST['comments-email']=="") { echo "<div class='alert alert-danger'> <a class='close' data-dismiss='alert'>×</a> <strong>Warning!</strong> Please fill the Email field. </div>"; } else { mail($to,$subject,$msg,"From:".$email); echo "<div class='alert alert-success'> <a class='close' data-dismiss='alert'>×</a> <strong>Thank you!</strong> </div>"; } } ?> app that I am using react to build in webpack. I am serving everything up with an chunks server. When I click on a express, I want the link tag to be added to the script. I am expecting this to download the file and not refresh the page.

Here is my index.html:

server.js

Here is my 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

Here is the 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 }) ] }; where everything starts at:

App.js

Finally here in my const rootRoute = { component: 'div', childRoutes: [ { path: '/', component: Main, childRoutes: [ require('./routes/reports') ] } ] }; render( <Router history={browserHistory} routes={rootRoute} />, document.getElementById('app') ); component that has the link:

Main.js

The page works, but when I click on the class Main extends React.Component { render() { return ( <div> <Link href="/reports">Reports</Link> <div> {this.props.children || <Home /> } </div> </div> ) } } export default Main; link in the reports, my page refreshes instead of just inserting the new code. What am I doing wrong?

EDIT:

Here is `routes/reports'

Main

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

Reports

1 个答案:

答案 0 :(得分:2)

而不是

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

待办事项

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