Wie ich in meinem Kommentar erwähnt habe, kann ich eine Lösung haben, die Ihren Bedürfnissen entspricht.
Diese Lösung erfordert einen MVC
Controller
und einen relevanten MapRoute()
.
Die allgemeine Idee ist es, die index.html
Seite über MVC
mit einem controller
und cshtml
und konfigurieren auf react-router
ein basename
wenn browserHistory
Erstellung zu liefern.
Der Schlüssel hier ist, dass der basename
Wert den gesamten Pfad (ohne die Domäne) bis zum controller
Namen enthalten muss.
zum Beispiel:
gegeben dieses controller
:
public class ReactController : Controller
{
public ActionResult Index()
{
return View();
}
}
und 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>
und routeMap
:
routes.MapRoute(
name: "reactApp",
url: "react/{*pathInfo}",
defaults: new { controller = "React", action = "Index", id = UrlParameter.Optional }
);
wir nun an, die App unter http://example.org/appName/
veröffentlicht wird dann Sie' Ich muss sicherstellen, dass der Router nicht den "appName"
Teil der URL löscht, wenn er geändert wird.
zum Beispiel, wenn Sie in der Homepage sind - http://example.org/appName/home
und bewegen Sie sich auf die Über Seite, möchten Sie react-router
die "appName"
wie so halten: http://example.org/appName/react/about
und nicht so http://example.org/about
mögen.
Obwohl dies funktioniert gut, da Sie diese URL nicht zurück auf den Server veröffentlichen, werden Sie ein Problem haben, wenn Sie versuchen werden, direkt auf die "Über" -Seite zu gehen. Der Server wird eine 404 zurückgeben, wenn Sie die Anfrage mit dieser URL senden: http://example.org/about/
statt dieser: http://example.org/appName/react/about
.
Meine Lösung für dieses Problem besteht darin, react-router
eine basename
übergeben, die die appName
+ Unterordner (falls vorhanden) + den Namen des Controllers enthält.
Ich verwende useRouterHistory
und die Schaffung der browserHistory
statt import
von ihm react-router
const browserHistory = useRouterHistory(createHistory)({
basename: appName
});
die appName
Variable ist wie folgt:
const controller = "/react";
const pathName = window.location.pathname;
const appName = pathName.substring(0,pathName.indexOf(controller) + controller.length);
Dies als Funktion Refactoring werden kann, aber es ist im Grunde Ruft die pathname
bis zum Controller-Namen (als eine Konvention mit Ihrer MVC-App) einschließlich des Controllernamens.
so wird react-router
diesen Pfad bei jeder URL-Änderung beibehalten. In unserem Fall "appName/react"
.
können Sie versuchen, react.net – thsorens
@ Clément Péau haben Sie eine Lösung gefunden? –
@ Sag1v Leider nicht. –