如何根据来自 ASP.NET Core 的路由在 React 中呈现不同的内容？

Question

我正在为多家商店开发一个网站。它们的地址如下：https://address/Store1/、https://address/Store2/ 等。 我想在后端根据 URL 参数（Store1、Store2）进行路由分离，以呈现不同的 React 组件或只是以某种方式将不同的数据返回到前端。

到目前为止我有：

Startup.cs

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "store",
        pattern: "Store/{action=Index}",
        defaults: new { controller = "Store" }
    );

    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller}/{action=Index}/{id?}"
    );
});

StoreController.cs

public ActionResult Index() {
     return Json("Please specify a store");
}

public ActionResult Store1() {
     return View("Store1");
}

public ActionResult Store2() {
     return View("Store2");
}

Store1 和 Store2 是 React 组件（Store1.tsx、Store2.tsx）。但在这种情况下，程序期望视图是一个.html/.cshtml 文件。

最后的问题是如何根据来自 ASP.NET Core 的路由在 React 中渲染不同的内容？

Answer 1

好吧，既然这是 SPA，你想错了。

您不能（在任何情况下都不想）让 .net 服务器获取普通的小组件。

您无法避免客户端路由，实际上您正在制作的应用程序应该是一个完整的、仅客户端的基于 react 的 SPA，并在客户端添加了路由。

您遇到的问题是，当您从应用程序中向服务器请求说“/Stores/1”时，例如导航链接，我猜一切都很好，因为所有组件都捆绑在交付的 SPA 应用程序上. 但是，当您尝试共享链接，或直接从新选项卡中点击“www.host.com/stores/1”时，服务器将不知道如何处理它......您的 SPA 从 1 点开始提供，它有 1 个起始状态。

你需要做的，是在客户端应用上添加路由，就像：

• www.host.com => 返回 SPA 应用
• www.host.com/Stores/1 => 应该再次返回相同的 SPA，但具有新的开始状态。

“处理 .net 上的路由”应该只意味着“如何处理详细路由，而不是只提供相同的入口点，当有人直接询问 .net 服务器时，而不是从应用程序客户端路由器内部导航（它指示渲染的内容）。

本质上，由于这是一个 SPA，“除了根路线之外的所有路线，都应该提供相同的 SPA，但起始状态不同”。

我最近实现了一个 react 前端，带有一个 .net 核心后端（apis 和 SPA 服务），上面的方法效果很好！