問題タブ [react-router-component]

私はすぐにreact-router 1.xに切り替える大規模なアプリケーションを持っています。

アプリケーションには、ネストされた大きなナビゲーション構造があります。

等..

/page1 では、サブ ナビゲーションは次のようになります。

オプション1 | オプション 2 | オプション 3 | オプション 4

そして /page/option4

オプション1 | オプション 2 | オプション 3

ルート構成からサブ ナビゲーション コンポーネントを起動する方法を探していたので、ページを 1 か所で定義するだけで済みますが、これまでのところ例を見つけることができませんでした。そのような問題に対する通常のアプローチは何でしょうか。そのような例は存在しますか?

アップデート

概念的には、ナビゲーション、ブレッドクラム トレイル、およびルーティングがページの階層的な定義から機能する .net サイトマップ プロバイダーの方針に沿って考えています。反応ルーターのルート定義がソースになるか、別のソースから駆動されるか、およびこれが通常どのように達成されるか疑問に思っています。

問題：

パラメータを含む動的リンクがある場合を除いて、この動的ルーターは機能します。

具体的には：

リンクをハードコーディングしたり、ブラウザに入力したりできます。

そしてコードで：

コンソールには次が表示されます。

しかし、動的リンクでは...

これは以下を生成します:

ブラウザが表示されます

一瞬の間、その後にリセットされます（ページはリロードされません）

コンソールが表示されている場合:

以下のジョーダンの提案に従って、この質問を書き直しました。
長すぎないことを願っています。ストアとして代替フラックスを使用しています

ルート.js:

それが routes.js ファイルにある場合は、おそらくこのセクションで何かを行う必要があります。

navItems.json:

私はこの問題を解決できません。いいねcomponentから呼び出す自分の HTML をレンダリングできませnested pathん。/page/detail

私のルートツリー

私の {App} コンポーネントはこれをレンダリングします:

私のルートはコンポーネント内/page/detailから呼び出されますが、このリンクにアクセスすると、 {Page} コンポーネントがレンダリングするものだけが表示されます。反応ルーターを使用してネストされたルートに関するいくつかの解決策を検索しましたが、答えが見つかりませんでした。Link{Page}

アップデート：

このソリューションによって、{Detail} コンポーネントの html をレンダリングしました: これを {Page} コンポーネント内に挿入しました

更新 2

{Page} コンポーネントに jQueryプラグインを挿入しました。

このプラグインは {Page} の更新ページでのみ機能します。/page/detail に移動してから /page に戻ると、プラグインは機能しません。

データベースに保存されたテキストを表示しています。データはfirebaseから文字列として取得されます（改行が含まれています）。HTMLとして表示するには、もともと次のことを行いました。

これはうまくいきました。ただし、追加機能が 1 つあります。ユーザーが入力[word]すると、その単語がリンクされます。これを達成するために、次の関数を作成しました。

方法はthis.permalink関係ないので割愛します。<Link>ご覧のとおり、react-router からインポートされたコンポーネントを返そうとしていますが、生の HTML であるため、dangerouslySetInnerHTML適切に動作しなくなりました。

だから私はこの時点でちょっと立ち往生しています。内部テキストの書式設定とリンクの作成の両方を行うにはどうすればよいですか?

私のルーターは次のようになります。

そして、私のメニューコンポーネントのサンプルコードは次のようになります

問題は、「マイ ダッシュボード」をクリックすると、次の場所にルーティングされることです。

ここから [マイ ダッシュボード] をもう一度クリックすると、次の場所にルーティングされます

そして続けてください。

この問題を解決するにはどうすればよいですか? 私はどこで間違いをしましたか？または、構成でさらに何かをする必要がありますか?

React コンポーネントのテストを作成しようとしています。このエラーが発生しています：

TypeError: 未定義のプロパティ 'pushState' を読み取ることができません

私のコードは次のようになります。

私のテストは次のようになります。

this.context.history.pushState(null, '/import_result');断線しているようです。this.context.historyテストを実行しているときのみ未定義ですが、コードを実行しているときはまったく問題ありません。私はあざけるべきthis.contextですか？もしそうなら、どうすればそれを嘲笑できますか？

React は初めてで、シングル ページ アプリケーションを開発したいので、react-router 4 ルーティングを使用しています。

ルートを指定する main.js の下

そして App.js は、ご覧のとおり、ヘッダーとフッターを固定し、ルートに応じてページのコンテンツを動的に変更したいと考えています。

このコードでは、パス ("/") を使用してアプリケーションが読み込まれると、リンク ホームをクリックしてホーム コンテンツを表示する必要がありますが、アプリケーションが最初に読み込まれると、デフォルトで表示されるようにしたいと考えています。

どうすればそれを達成できますか？

ありがとうございました！！

react-router-component でハッシュベースのルーティングを使用したいので、次のようにhash属性を<Locations>コンポーネントに追加しました。

私はこの場所に次のようにリンクしています：

また、コンポーネントにハッシュタグを手動でLink含めようとしました (ハッシュベースのルートにリンクする方法が文書化されていないことがわかりません)。

問題は、いずれにせよ、react-router-component がリンクのクリックに応答しないことです。ブラウザーで URL を更新していますが、場所でハンドラーとして定義されたコンポーネントをレンダリングするように切り替えていません。

http://localhost:8082/#/movies/などの URL に手動でアクセスすると、正しいコンポーネントがレンダリングされますが、やはりナビゲートできません。

hashまた、から属性を削除すると、<Locations>ルートへのリンクが再び期待どおりに機能します。

ここ数日、深くネストされたコンポーネントのルーティングで直面している問題を解決しようとしています。私はreactjs v14.6とreact-router v2.0をbrowserHistoryで使用しています。hashHistory に置き換えて、非推奨の履歴 mixin を使用すると、期待どおりに動作します。

反応ルーターを使用して、レンダリングに成功し、デフォルトのホームページからプロファイル ページにルーティングできました。ホーム コンポーネントとプロファイル コンポーネントの両方でレンダリングされるナビゲーション バーとして、searchGithub という子コンポーネントがあります。profile/:usernameプロファイル コンポーネント/ページに正常にルーティングされるクエリ パラメータを取得する基本的な検索です。高次関数の履歴ミキシングの交換に関するドキュメントに従いました

プロファイル ページで検索コンポーネントを使用しようとすると、問題が発生します。/profileURLに追加を追加します。たとえば、ホームページからは適切にルーティングされますhttp://localhost:3000/profile/tylerが、プロファイルページでユーザー名を検索しようとすると、代わりにURLがhttp://localhost:3000/profile/profile/tylerエラーの原因になりますWarning: [react-router] Location "/profile/profile/tyler" did not match any routes

完全なプロジェクトを表示するための github リポジトリへのリンクは次のとおりです。

問題は browserHistory や server.js ファイルにあるのではなく、routes ファイルまたはコンポーネントの 1 つに問題があると思います。上記のリンクを自由にチェックして、完全なプロジェクトを取得し、必要に応じて依存関係をインストールしてください。場所記述子を渡さないことに関係していると思いますが、これも渡す必要がある3番目の引数かどうかはわかりませんthis.context.router.push()

ここに私の /App.jsx コンポーネントがあります

ここに私の /routes.jsx があります

ここに私の /SearchGithub.jsx があります

ここに私の /main.jsx があります

私はrouter.push({ pathname, query, state }) // new "location descriptor"自分が間違っていることを理解しようとして髪を引っ張っていたので、誰かが助けてくれることを願っています。それが実際に問題の原因である場合、ロケーション記述子をどのように実装するかにも興味があります