爲什麼點擊鏈接時，我的反應/ 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應用程序會刷新？

回答

相關問題