2

私は、MVCによって管理されるルートを持つAPIを持っています。
それに加えて、私は反応してSPAを作りたいと思っています。
私のリアクションアプリ内からビルドしたルートには到達できません。私はISSから404を取得しています。ここで私のコードからスタブを取得しています。MVCルートの上に反応してSPAを構築する

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にset URLの反応ルートをレンダリングするよう指示する方法はありますか? "/ app/*"としましょう。

ありがとうございます。

+0

あなたはreact.netを試すことができます – thsorens

+0

@ClémentPéauあなたは解決策を見つけましたか? –

+0

@ Sag1v悲しいことではない。 –

答えて

2

私のコメントで述べたように、あなたのニーズに合った解決策があるかもしれません。
このソリューションには、MVCControllerと関連するMapRoute()が必要です。
一般的な考え方は、browserHistoryを作成するときにcontrollercshtmlを使用してMVC経由index.htmlページを提供し、react-routerbasenameに設定することです。
キーの場合、basenameの値には、ドメインなしでパス全体(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:このcontroller与え

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

今、あなたのアプリケーションは、その後http://example.org/appName/ の下で公開されていると言うことができます君は'反応ルータはURLを変更する際に反応ルータが"appName"部分を削除しないようにする必要があります。そうhttp://example.org/aboutようhttp://example.org/appName/react/about
及びません: - あなたがホームページになら
例えば、http://example.org/appName/home
、あなたがページについてに移動し、あなたはreact-routerがそうのよう"appName"
を維持したいです。

このURLはサーバーにポストしないのでうまくいきますが、「情報」ページに直接移動しようとすると問題が発生します。サーバーは、次のURLの代わりにhttp://example.org/about/
の要求を送信すると404を返します。http://example.org/appName/react/about

この問題への私の感想は、appName +サブフォルダ(存在する場合)+コントローラ名を含む basenameを渡すことです。

私はappName変数は以下の通りであるuseRouterHistoryを使用してreact-router

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

からbrowserHistory代わりのimportそれを作成しています:

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

これは関数としてリファクタリングが、基本的にすることができますコントローラー名を含むコントローラー名(MVCアプリケーションの規則として)までpathnameを取得します。
react-routerは、すべてのURLの変更時にこのパスを保持します。 私たちの場合"appName/react"

関連する問題