title: React Router with Asp.net core
body: <p>I am trying to use React router with asp.net core. The problem is that I can't access the Blog component. </p>
  
  <p>Here's the error:
  <code>Failed to load resource: the server responded with a status of 404 (Not Found)</code></p>
  
  <p>Here's my code:</p>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>    const path = require('path');
      const webpack = require('webpack');
      module.exports = {
      entry: { 'main':'./Client/index.js'},
      output: {
      path:path.resolve(__dirname,'wwwroot/dist'),
      filename: 'bundle.js',
      publicPath: 'dist/'
      },
      watch: true,
      mode: 'development',
      module: {
      rules: [ 
      {test: /\.css$/, use: [{ loader: "style-loader" },
      { loader: "css-loader" }]},
      { test: /\.js?$/, 
      use: { loader: 'babel-loader', options: { presets: 
                    ['@babel/preset-react','@babel/preset-env'] } } },
        ]
      }
     }
  </code></pre>
  
  <p>index.js from client side. I am fully aware that asp.net core has template for react application. I just don't like to use typescript</p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>    import React from 'react';
      import ReactDom from 'react-dom';
      import { createStore,applyMiddleware } from 'redux'
      import { Provider } from 'react-redux'
      import ReduxPromise from 'redux-promise'
      import reducers from './reducers';
      import Blog from './components/Blog';
      import NavBar from './components/NavBar';
      import { BrowserRouter,Route } from 'react-router-dom'
      import './style/index.css'
      import App from './components/App';
      const store = applyMiddleware(ReduxPromise)(createStore);
      ReactDom.render(
      &lt;Provider store={store(reducers)}&gt;
      &lt;BrowserRouter&gt;
        &lt;div&gt;
         &lt;NavBar/&gt;
          //Can't access this Component
         &lt;Route exact path='/blog' component={Blog}/&gt; 
        &lt;/div&gt;
      &lt;/BrowserRouter&gt;
     &lt;/Provider&gt;
     ,document.getElementById('react-app')
    )
  </code></pre>
  
  <p><strong>Startup.cs</strong></p>
  
  <pre><code>    using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Threading.Tasks;
      using Microsoft.AspNetCore.Builder;
      using Microsoft.AspNetCore.Hosting;
      using Microsoft.AspNetCore.Http;
      using Microsoft.Extensions.DependencyInjection;
      using Microsoft.AspNetCore.SpaServices.Webpack;
      namespace server
     {
  public class Startup
  {
      // This method gets called by the runtime. Use this method to add services to the container.
      // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
      public void ConfigureServices(IServiceCollection services)
      {
          services.AddMvc();
      }
  
      // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
      public void Configure(IApplicationBuilder app, IHostingEnvironment env)
      {
          if (env.IsDevelopment())
          {
              app.UseDeveloperExceptionPage();
              app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
              {   
                  HotModuleReplacement = true,
                  ReactHotModuleReplacement = true
              });
          }
          app.UseStaticFiles();
          app.UseMvc(routes =&gt;
          {
              routes.MapRoute(
              name: "default",
              template: "{controller=Home}/{action=Index}/{id?}");
          });
      }
  }
  }
  </code></pre>