問題タブ [react-router]

React-router を使用しており、リンク ボタンをクリックしている間は正常に動作しますが、Web ページを更新すると、必要なものが読み込まれません。

たとえばlocalhost/joblist、リンクを押してここに到着したので、すべて問題ありません。しかし、ウェブページを更新すると、次のようになります。

デフォルトでは、このようには機能しませんでした。当初、私は自分の URL をlocalhost/#/andとして持っていましたが、localhost/#/joblistそれらは完全に正常に機能しました。しかし、私はこの種の URL が好きではないので、それを消去しようとして、次のよう#に書きました。

この問題は では発生しませんlocalhost/。これは常に必要なものを返します。

編集:このアプリは単一ページなので/joblist、サーバーに何も要求する必要はありません。

EDIT2：ルーター全体。

ブラウザで F5 を押すと問題が発生します。

私はreact-routerで定義されたルートを持っています:

<Route name="realestatesPrefiltered" path="realestatesPrefiltered/:search/:type" handler={RealEstatesPage}/>

そしてnode.jsでルーティングします

app.use(route.get("/realestatesPrefiltered/:search/:type", getLayout));

しかし、F5 を押すと空白のページが表示されるのはなぜですか?

パラメータのない別のルートがあります。

<Route name="realestates" handler={RealEstatesPage}/>

app.use(route.get("/realestates", getLayout)); すべてが正常に機能しています。

私は自分のアプリケーションでReactJSandを使用react-routerしています。次のことを行う必要があります。ユーザーがページを開いたときに、ログインしているかどうかを確認し、ログインしている場合はページにリダイレクトし/authます。私は次のことをしています：

ブラウザの URL では、実際に にリダイレクトし/auth、ページをレンダリングしてから、/auth現在のコンポーネントでオーバーライドします。ここで質問: 現在のコンポーネントのレンダリングをキャンセルする方法、または他の方法でリダイレクトを行う方法は? ありがとう。

共有 (「同形」) コードベースを使用して、クライアントとサーバーの両方でレンダリングする React アプリ (Express サーバー) を作成しています。場合によっては、サーバーがレンダラーの場合、リクエスト オブジェクトにアクセスしたいことがあります。ノードは一度に 1 つのリクエストに応答するため、変数のキャッシュを利用して、応答を送信する前に変数をリセットするのは安全ではないでしょうか?

これは機能しますが、なぜそれが良いアイデアなのか悪いアイデアなのか誰か教えてもらえますか?...

サーバー.js

request-store.js

resolve.js

私は React-router で味付けされた React.js アプリを持っています。現在のルート処理について疑問があります。

デザインは次のようになります。一般的なモバイル レイアウト、固定のヘッダーとフッター、コンテンツが中央に配置されています。

それらが静的な場合、そのような構造を簡単に作成できます。

ただし、ページごとに変更される場合もあります。たとえば、次のようになります。

• タイトルとボタンのテキスト
• ボタン数
• 一部のページでフッターが表示されない

それらをView Controller内に配置し、毎回再レンダリングする方が良いRouteHandlerですか?

ルートを介してデータを渡す最良の方法を見つけようとしています。params を使用できることはわかっていますが、params に属さない特定の種類のデータがあります。

例: アプリケーションのリストを表示するインデックス ページがあります。各アプリケーションの横には、そのアプリケーションのビューに移動するためのボタンがあります。

アプリケーション自体を Application ハンドラに渡したい。ただし、アプリケーション全体を params で渡すのは意味がありません。アプリケーション識別子をparamsに渡すことは理にかなっていますが（つまり、:idまたは:name）

したがって、私がこれを行うべきだと思う方法は、アプリケーション識別子を params に渡すことです。次に、Application コンポーネントで、ID を指定して適切なアプリケーションを ApplicationStore で検索します。

ただし、アプリケーション自体を渡す方が簡単で高速ではないでしょうか? これを行う方法はありますか。これをしない理由はありますか？

ここにいくつかのコードがあります：

<Link to="showApplication" params={{name: application.name}}>View</Link>

また

<Link to="showApplication" params={{application: application}}>View</Link>

前もって感謝します！

最近、react と webpack の使用を開始しましたが、ほとんどの点で優れていますが、テスト時にアプリが iframe にレンダリングされ、ルート以外のルートを直接読み込むことができなくなります。したがって、テストしたい場合はhttp://localhost:8000/#/signin、その URL を読み込むことはできませんが、代わりにベース URL を読み込んで、サインイン ページを指すリンクをクリックする必要があります (または、少なくともそれが機能することがわかった唯一の方法です)。 ）。

これを行うより良い方法はありますか？

これは、かなりハックなソリューションを備えた同様の質問です。あれから何か変わったことはありますか？

CSS ではなく requestAnimationFrame を使用してトランジションをアニメーション化できるように、React Router でアニメーション用の React の低レベル API (つまり、ReactTransitionGroup) を使用しようとしています。各ルートに関連付けられたコンポーネントで呼び出される特別なライフサイクル フックを取得する方法を知っている人はいますか?

RouteHandler コンポーネントを ReactTransitionGroup 内にラップしようとしましたが、ルートを変更するときに現在のルートのコンポーネントの「componentWillLeave」イベントが発生しません。

これが私の問題を示す JSFiddle です: http://jsfiddle.net/d2mnwqLj/3/

反応ルーターの奇妙な動作に気付きました。私は自分のルートを次のように定義しています：

https://github.com/shovon/generator-react-material-uiのフォークで。

LeftNav のリンクをクリックすると、期待どおりの結果が得られます。gulp を開始すると、/ から /home へのリダイレクトが機能します。奇妙で望ましくないように見えるのは、次のようなものを入力するときですhttp://localhost:3000/#/some-undefined-route。予想どおり、DefaultRoute ハンドラーが引き継ぎ、ホームページのコンテンツが表示されます。ただし、奇妙な URL は残ります。私が期待するのは、未定義のルートが事前定義されたキャッチオールにリダイレクトされることです。たとえば、そのコンテンツを表示するだけでなくhttp://localhost:3000/#/some-undefined-route、自動的にリダイレクトしたい。http://localhost:3000/#/home

目的の効果を得るためにミックスインを使用しようとしていますtransitionTo()が、これを処理する「正しい」方法を誰かが知っているかどうかまだ疑問に思っています. また、私が見ているのは実際に意図した反応ルーターの動作なのだろうかと思います。何かが欠けている場合は、啓発されたいと思います。乾杯！

アップデート

反応ルーターのタウローズから:

やってみました

<Redirect from="*" to=".." />

https://github.com/rackt/react-router/issues/732に応答する場合。

同様の質問で他の人を助けるかもしれないのは、各サブルートにも Redirect を提供する必要があることに注意することです.

どうやら、このセットアップは、より詳細なルート制御と 404 などの処理を可能にするように設計されているようです。

from="*"最初はそうかなと思っていたのですが、スプラット（ ）の仕組みがわかりませんでした。多分これは他の人に役立つでしょう。乾杯。

Edit2 つの異なるルート (Createおよび) でフォームをレンダリングするコンポーネントがありますEdit。

EditRoute入力を埋めるためにサーバーからのコンポーネント要求データにいる場合、それ以外の場合はフォームを表示するだけです....

このリクエストはcomponentDidMount(React ドキュメントにあるように) で行われます…</p>

ここに私の問題があります: もし( ) にいてedit( /brands/1/edit) に行くと、私のコンポーネントは を通過しません。なんで？私のコンポーネントが次のページに残っているようです。create/brands/createcomponentDidMount

Obs: render メソッドが呼び出されます。そして、私はreact-routerを使用しています。