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?}");
        });
    }
}
}

Forgot to mention, the NavBar is visible on '/' but when I redirect to '/blog' both of the components doesn't shows up — Huy Tran
– Huy Tran, Commented Mar 19, 2018 at 0:58

Huy Tran · Accepted Answer · 2018-03-19 02:34:58Z

9

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

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

answered Mar 19, 2018 at 2:34

Huy Tran

3904 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

P basak Over a year ago

You saved my life! Can you also refer to the source?

Dave Barnett Over a year ago

See what-is-equivalent-to-mapspafallbackroute-for-asp-net-core-3-0-endpoints for .net core 3.

gurkan · Accepted Answer · 2021-03-01 14:13:55Z

1

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" });

edited Mar 1, 2021 at 14:13

gurkan

1,4707 gold badges20 silver badges29 bronze badges

answered Mar 1, 2021 at 6:38

Casey

1011 silver badge4 bronze badges

Collectives™ on Stack Overflow

React Router with Asp.net core

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related