React Router with Asp.net core

Question

I am trying to use React router with asp.net core. The problem is that I can't access the Blog component.

Here's the error: Failed to load resource: the server responded with a status of 404 (Not Found)

Here's my code:

webpack.config.js

    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'] } } },
      ]
    }
   }

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

index.js

    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(
    <Provider store={store(reducers)}>
    <BrowserRouter>
      <div>
       <NavBar/>
        //Can't access this Component
       <Route exact path='/blog' component={Blog}/> 
      </div>
    </BrowserRouter>
   </Provider>
   ,document.getElementById('react-app')
  )

Startup.cs

    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 =>
        {
            routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
        });
    }
}
}

Answer 1

Turns out, I just need to add this to Startup.cs

    routes.MapSpaFallbackRoute(
    name: "spa-fallback",
    defaults: new { controller = "Home", action = "Index" });

Answer 2

I too have the same issue with the new frameworks but turn out to be above solution works below the 3.0 framework. Below is the way for above frameworks

ASP.NET Core MVC 3.0+

endpoints.MapFallbackToController("Index", "Home");    

ASP.NET Core MVC Before 3.0

routes.MapSpaFallbackRoute(
   name: "spa-fallback",
   defaults: new { controller = "Home", action = "Index" });