Question

我有一个由MVC管理的路由的API 最重要的是，我想用反应来建立一个SPA 然而，我从我的反应应用程序内部构建的路由无法到达，我从ISS获得404，这里是我的代码中的存根。

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的路由反应，让我们说＆＃34; / app / *＆＃34;。

提前致谢。

Answer 1

正如我在评论中提到的，我可能有一个能够满足您需求的解决方案此解决方案需要MVC Controller和相关的MapRoute() 一般的想法是使用index.html和MVC通过controller提供cshtml页面，并在创建{react-router时配置basename browserHistory 1}}。
这里的键是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时不会删除URL的"appName"部分例如，如果您在主页 - http://example.org/appName/home中并且您转到关于页面，您希望react-router保留"appName"
像这样：http://example.org/appName/react/about
而不是http://example.org/about。

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

我对此问题的解决方法是通过react-router basename appName，其中包含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

这可以作为一个函数进行重构，但基本上它会获得react-router到控制器名称（作为MVC应用程序的约定），包括控制器名称。
那样"appName/react"将保持每个URL更改的路径。在我们的案例中;with cte as ( select * , rn_asc = row_number() over (partition by VisId order by date_time asc) , rn_desc = row_number() over (partition by VisId order by date_time desc) , rn_mkge = case when prop11 <> 'Root' then row_number() over (partition by VisId order by date_time asc) end from t ) select VisId , FirstProp = max(case when rn_asc = 1 then date_time end) , FirstNonRoot = max(case when rn_mkge = 1 then date_time end) , LastProp = max(case when rn_desc = 1 then date_time end) from cte group by VisId。

Answer 2

我通过为 react-router-dom 添加 exact path 而不是 path 修复了 ASP.NET + React SPA 解决方案 (.NET 5.0) 中的反应路由。

构建SPA，在MVC路由之上做出反应

2 个答案: