具有Asp.net核心的React Router

Question

我正在尝试使用带有asp.net核心的React路由器。问题是我无法访问Blog组件。

这是错误： Failed to load resource: the server responded with a status of 404 (Not Found)

这是我的代码：

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。我完全知道，asp.net核心具有用于反应应用程序的模板。我只是不喜欢使用打字稿

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')
  )

启动文件

    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

原来，我只需要将其添加到Startup.cs中

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