問題タブ [react-router-component]

react-router-component の使用で問題が発生しました。

次のコードは、少なくともhttp://localhost:8080/#aboutのようなリンクに対しては正常に機能します。

次のようなより深いパス処理を実装することは可能ですか:

?

ドキュメントには、この問題に関する例はありません。

ありがとう！

このドキュメントは、 react -router 2 を使用して、サーバー側で get、post、put などのさまざまなタイプの http リクエストで反応コンポーネントをレンダリングする方法を理解するには十分ではありません。

私は単純な Hello World アプリを持っており、ルートは 1 つだけで、子ルートやインデックス ルートはありません。ルーティングには、jsx sysntax の代わりにプレーン ルートを使用します。ここでも、react-router の動的ルーティングを使用して、Hello コンポーネントを webpack でロードしています。私のapp.jsx ファイルには次のコードがあります。

Hello.jsx コンポーネントには次のコードがあります

私のアプリケーションには、4 つのタブを持つタブ コンポーネントがありました。各タブのコンテンツは、個別のコンポーネントとして設定されました。タブを 4 つの異なるルートに置き換えています。タブを取り除きreact-router、4 つのコンポーネントごとに 1 つずつ、4 つのルートを設定していました。

タブとの間を移動するとき、タブのコンテンツはその状態を維持します。たとえば、ユーザーが 1 つのタブでリストの一番下までスクロールしたとします。ユーザーが別のタブに移動して戻ってきた場合、リストは一番下までスクロールされたままになります。

ルートでこの動作を実現できません。あるルートから別のルートに移動すると、コンポーネントが (再レンダリングされるだけでなく) 再インスタンス化されることに気付きました。

タブのような動作を実現したい。ディープ ステート リダイレクトを提供する Angular 用の UI-Router-Extras というライブラリがあることは知っています。しかし、React の同様のオプションが見つかりません。ルートがアクティブになったときにコンポーネントを再インスタンス化しようreact-routerとしました。react-router-component

React のルートでこの動作を実現するソリューションはありますか?

私の目標は、ネストされた URL を次のように定義することです。 /dashboard/modules/12242433

この例を使用してコードをモデル化しました: React Router Examples: dynamic-segments

これが私のルートを定義するrenderメソッドです

には移動できますが、または/dashboardに移動しようとするとすぐに、あまり役に立たないように見えるエラー メッセージが表示されます。/dashboard/modules/dashboard/modules/123232

bundle.js:2 Uncaught SyntaxError: Unexpected token <

これが私のコンポーネントです。私の理解では、コンプの子をレンダリングしている限り、これは機能するはずです。

ダッシュボード

モジュール

モジュール

アップデート

私のコードは正しかった（っぽい）ことがわかりましたが、今はさらに混乱しています。このナビゲーションは、クリックによって URL に到達する限り機能します。

<NavLink to="/dashboard/modules/SomeModName">View Mod</NavLink>

URL を入力するだけでテストしてきましたが/dashboard/modules/SomeModName、これは常に壊れるものです。

この URL を両方の方法で機能させる方法はありますか?

2 つ目のバグを見つけましたが、それらは関連していると思います..

リンクをクリックする/dashboard/modulesと正しく読み込まれますが、更新を押すと元のエラーが表示されます。

React Router のどのコア部分を見落としましたか?

2 回目の更新 このコードを例からローカルに取得すると、バグを再導入できます (詳細ビューで更新するとページが壊れます)。ただし、リポジトリ全体を複製してそのまま実行しても、更新は中断されません。この行動に影響を与えるのは何ですか？

React ルーターのマスター詳細の例

webpack.config.js

React-router-component の公式 github ページには、次のように記載されています。

たとえば、匿名ユーザーとサインイン ユーザーに対して許可された別の場所のセットを返すことができます。

それはまさに私が達成したいことですが、実際にこれを行う方法のチュートリアルがどこにも見つかりません。

基本的に、ログインユーザーとゲストユーザー用に別々のルーターが必要です。ゲスト ルーターのデフォルトはログイン ページであり、ログイン エラー ページまたは About ページにリダイレクトされる場合があります。ユーザーが正常にログインすると、ログインしたルーターが制御を取得し、デフォルトでシステム概要ページが表示されます。ログインしたルートは、すべてのページにナビゲーション パネルもレンダリングする必要があります。

反応ルーターでこれを行うことは可能ですか?

異なるコンポーネントで異なるパラメーターを使用したい。上記のコードをテストしましたが、動作しません。これに変更すると、上記のコードが機能します。

助けてくれてありがとう

ルートの onEnter や onChange フックでパスを変更すると、url が無限に変わるようです。しかし、子ルートのパスを変更すると機能します。実際には、認証を 1 か所で処理したいのですが、それ以外の場合は、すべての子ルートが同じロジックを処理する必要があります。