- 首先,在Dockerfile中,确保你已经使用的是ASP.NET Core SDK映像(例如:mcr.microsoft.com/dotnet/core/sdk:3.1)而非ASP.NET Core运行时映像。在这种情况下,你需要在Dockerfile中添加以下行来构建React应用程序并将生成文件复制到ASP.NET Core应用程序中:
FROM node AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM mcr.microsoft.com/dotnet/core/sdk:3.1
WORKDIR /app
COPY --from=build /app/build ./
ENTRYPOINT ["dotnet", "MyApp.dll"]
- 其次,在React应用程序(src/index.js)中使用BrowserRouter而不是HashRouter,并将basename属性设置为应用程序根目录路径:
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './App'
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')
const rootElement = document.getElementById('root')
ReactDOM.render(
,
rootElement
)
- 最后,在ASP.NET Core中确保使用UseMvcWithDefaultRoute(而不是UseMvc)和MapFallbackToFile:
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseHttpsRedirection();
app.UseHsts();
}
app.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
app.Use(async (context, next) =>
{
await next();
if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value))
{
context.Request.Path = "/index.html";
await next();
}
});
app.UseMvcWithDefaultRoute();
app.UseSpa(spa =>
{