Clé*_*éau 6 javascript asp.net-mvc single-page-application reactjs react-router
我有一个由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的路由反应,让我们说"/ app/*".
提前致谢.
正如我在评论中提到的,我可能有一个适合您需求的解决方案.
该解决方案需要MVC Controller和相关MapRoute().
总的想法是为客户提供index.html通过网页MVC使用controller和cshtml并配置react-router一个basename创建时browserHistory.这里
的关键是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 "appName"在更改URL时不会删除该部分URL.
例如,如果你在主页 - 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.
我soulution这个问题是通过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控制器名称(作为MVC应用程序的约定),包括控制器名称.
这种方式react-router将保持每个URL更改的路径.在我们的例子中"appName/react".