Почему обновление моего приложения/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; 

страница работает, но когда я нажимаю на reports ссылке в Main, моя страница обновляется вместо того, чтобы просто вставить новый код. Что я делаю не так?

EDIT:

Вот `маршруты/отчеты

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> 

Do

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