草庐IT

javascript - 在 MVC 路由之上构建一个具有反应的 SPA

coder 2024-12-14 原文

我有一个 API，其路由由 MVC 管理。
最重要的是，我想用 React 构建一个 SPA。
但是，无法访问我在 React 应用程序内部构建的路由，我从 ISS 收到 404，这里是我的代码的 stub 。 

export default class Layout extends React.Component {
render() {
   <div> 
     <Router history={ hashHistory }>
       <Route path="/" component={ Home } >
         <Route path="login" component={ Login } />
       </Route>
     </Router>
   <div>
}

当我在没有后端的情况下独立执行此代码时，它可以完美运行。
有没有办法告诉 MVC 呈现设置 url 的 react 路由，比方说“/app/*”。

提前致谢。

最佳答案

正如我在评论中提到的，我可能有适合您需求的解决方案。
此解决方案需要一个 MVC Controller 和一个相关的 MapRoute()。
总体思路是使用 controller 和 cshtml 通过 MVC 交付 index.html 页面，并在 react-router 创建browserHistory时的basename。
这里的关键是basename值必须包含到controller名称的整个路径(没有域)。
例如:
给定这个 controller:

public class ReactController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

和cshtml:

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <title>app name</title>
    <link href="path/to/file.css/if/needed" rel="stylesheet" />
</head>
<body>
    <div id="app"></div>
    <script src="path/to/bundle.js"></script>
</body>
</html>

和routeMap:

    routes.MapRoute(
        name: "reactApp",
        url: "react/{*pathInfo}",
        defaults: new { controller = "React", action = "Index", id = UrlParameter.Optional }
    );

现在，假设您的应用发布在 http://example.org/appName/ 那么你需要确保 react-router 在更改时不会删除 URL 的 "appName" 部分。
例如，如果您在主页 - http://example.org/appName/home
并且您移动到关于页面，您希望react-router 保留"appName"
像这样:http://example.org/appName/react/about
而不是像 http://example.org/about 这样的。

虽然这会很好地工作，因为您没有将此 URL 发回服务器，但是当您尝试直接转到“关于”页面时，您将面临一个问题。当您使用此 URL 发送请求时，服务器将返回 404:http://example.org/about/
而不是这个:http://example.org/appName/react/about。

我对这个问题的解决方案是向 react-router 传递一个 basename，其中包括 appName + 子文件夹(如果有)+ Controller 名称。

我正在使用 useRouterHistory 并创建 browserHistory 而不是 import 从 react-router

const browserHistory = useRouterHistory(createHistory)({ 
  basename: appName
});

appName 变量如下:

const controller = "/react";
const pathName = window.location.pathname;
const appName = pathName.substring(0,pathName.indexOf(controller) + controller.length);

这可以重构为一个函数，但基本上它获取 pathname 直到 Controller 名称(作为您的 MVC 应用程序的约定)，包括 Controller 名称。
这样 react-router 将在每次 URL 更改时保留此路径。 在我们的例子中 "appName/react"。

关于javascript - 在 MVC 路由之上构建一个具有反应的 SPA，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38720214/

javascript反应code34appNameasp.net-mvcreactjsreact-routersingle-page-application

有关javascript - 在 MVC 路由之上构建一个具有反应的 SPA的更多相关文章

  1. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题

  2. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  3. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  4. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  5. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  6. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

  7. ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串？ - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？

  8. ruby-on-rails - Rails - 从另一个模型中创建一个模型的实例 - 2

    我有一个正在构建的应用程序，我需要一个模型来创建另一个模型的实例。我希望每辆车都有4个轮胎。汽车模型classCar轮胎模型classTire但是，在make_tires内部有一个错误，如果我为Tire尝试它，则没有用于创建或新建的activerecord方法。当我检查轮胎时，它没有这些方法。我该如何补救？错误是这样的:未定义的方法'create'forActiveRecord::AttributeMethods::Serialization::Tire::Module我测试了两个环境:测试和开发，它们都因相同的错误而失败。 最佳答案

  9. ruby - 用 Ruby 编写一个简单的网络服务器 - 2

    我想在Ruby中创建一个用于开发目的的极其简单的Web服务器(不，不想使用现成的解决方案)。代码如下:#!/usr/bin/rubyrequire'socket'server=TCPServer.new('127.0.0.1',8080)whileconnection=server.acceptheaders=[]length=0whileline=connection.getsheaders想法是从命令行运行这个脚本，提供另一个脚本，它将在其标准输入上获取请求，并在其标准输出上返回完整的响应。到目前为止一切顺利，但事实证明这真的很脆弱，因为它在第二个请求上中断并出现错误:/usr/b

  10. ruby - 一个 YAML 对象可以引用另一个吗？ - 2

    我想让一个yaml对象引用另一个，如下所示:intro:"Hello,dearuser."registration:$introThanksforregistering!new_message:$introYouhaveanewmessage!上面的语法只是它如何工作的一个例子(这也是它在thiscpanmodule中的工作方式。)我正在使用标准的ruby​​yaml解析器。这可能吗？ 最佳答案 一些yaml对象确实引用了其他对象:irb>require'yaml'#=>trueirb>str="hello"#=>"hello"ir

随机推荐