Erstellen eines SPA mit reagieren auf MVC Routen

Ich habe eine API, die Routen von MVC verwaltet hat.
Darüber hinaus möchte ich ein SPA mit reagieren bauen.
Aber die Routen, die ich aus meiner react-App heraus erstelle, können nicht erreicht werden, ich bekomme einen 404 von ISS, hier einen Stub von meinem Code.Erstellen eines SPA mit reagieren auf MVC Routen

Wenn ich diesen Code als eigenständiges Programm ohne Backend ausführe, funktioniert es einwandfrei.
Gibt es eine Möglichkeit zu sagen, MVC reagiert Routen für eine festgelegte URL, sagen wir "/ app/*".

Vielen Dank im Voraus.

Quelle

2016-08-02 Clément Péau

können Sie versuchen, react.net – thsorens

@ Clément Péau haben Sie eine Lösung gefunden? –

@ Sag1v Leider nicht. –

Wie ich in meinem Kommentar erwähnt habe, kann ich eine Lösung haben, die Ihren Bedürfnissen entspricht.
Diese Lösung erfordert einen MVCController 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".

Quelle

2017-03-20 15:58:32

Erstellen eines SPA mit reagieren auf MVC Routen

Antwort

Verwandte Themen