問題タブ [react-router-v4]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - オプションのパスパラメーターを使用してルーターを反応させる
オプションのパスパラメーターを使用してパスを宣言したいので、ページを追加すると、何か特別なことをする（たとえば、データを入力する）：
http://localhost/app/path/to/page <= ページをレンダリングします http://localhost/app/path/to/page/pathParam <= pathParam に従っていくつかのデータを含むページをレンダリングします
反応ルーターには、2 つのオプションをサポートするために次のパスがあります (これは単純化された例です)。
私の質問は、 1 つのルートで宣言できますか? 2 行目だけを追加すると、パラメーターのないルートは見つかりません。
編集＃1：
ここで述べた次の構文に関する解決策はうまくいきませんでした。それは適切なものですか? ドキュメントに存在しますか？
私の反応ルーターのバージョンは: 1.0.3
reactjs - react-router v4 - 「コンポーネント」属性を使用して純粋な関数にパラメーターを提供する方法
次のコードがあります。
しかし、ESLint は が原因で次の警告をスローしています=>。これは (AFAIK)render呼び出しごとに関数の新しい参照を作成するため、悪い習慣であり、私はそれを望んでいません。
警告 JSX props should not use arrow functions react/jsx-no-bind
したがって、次のような専用のシンプルなコンポーネントを使用して、これをリファクタリングしようとしています。
でも、使い方が分からなくて困っています。
componentまず、属性の代わりに使用する必要があると思いますrenderが、よくわかりませんし、これに関する適切なドキュメントもまだ見つかりません。(編集: https://react-router.now.sh/Match ここに v4 のドキュメントがあります)
以下を含むいくつかのことを試しましたが、うまくいきません。
いくつかの例を見つけましたが、それらはすべて を使用しています。これは、ステートレス コンポーネントに対して何かを行うための新しい「最良の」方法であるように見えるためReact.createClass、むしろ使用したくありません。const
考えられる解決策の 1 つは、React.Component を拡張する Class を使用することです。しかし、それは間違っていると感じています。（そしてESLintはそれに関するエラーを表示しています）
コンポーネントは純粋な関数として記述する必要があります
react/prefer-stateless-function
メソッドに関するドキュメントからrender: ( https://react-router.now.sh/Match )
コンポーネントをレンダリングする代わりに、場所が一致したときに呼び出される関数を渡すことができます。render 関数は、コンポーネントに渡されるものと同じ props で呼び出されます。 これにより、便利なインライン マッチのレンダリングとラッピングが可能になります。
便利かもしれませんが、良い習慣とは見なされません。
代わりに純粋な関数を使用してそれを行う方法はありますか?
javascript - react-router v3 から v4 へのルートの変換に関する問題
反応ルーター v3 を使用して、次のルート構成があります。
v4を使用して次のことを試しました：
および内部Adminコンポーネント:
問題：
- にアクセスする
/loginと、Adminコンポーネントも一致します。 - に変えてみました
<Match pattern="/" exactly component={Admin} />。Adminコンポーネントでサブマッチをレンダリングしません。だから私が訪れたとき/profile、それは一致しません。
javascript - 反応ルーター v4 / v5 を使用したネストされたルート
現在、react ルーター v4 を使用してルートをネストするのに苦労しています。
最も近い例は React-Router v4 Documentationのルート構成です。
アプリを 2 つの異なる部分に分割したいと考えています。
フロントエンドと管理エリア。
私は次のようなことを考えていました：
フロントエンドのレイアウトとスタイルは、管理エリアとは異なります。したがって、フロントページ内のルートホーム、約などは子ルートにする必要があります。
/homeを Frontpage コンポーネントにレンダリングし、/admin/homeを Backend コンポーネント内にレンダリングする必要があります。
いくつかのバリエーションを試しましたが、常に /home または /admin/home にヒットしませんでした。
編集 - 19.04.2017
この投稿には現在多くのビューがあるため、最終的な解決策で更新しました。誰かの役に立てば幸いです。
編集 - 08.05.2017
古いソリューションを削除しました
最終的解決：
これが私が現在使用している最終的なソリューションです。この例には、従来の 404 ページのようなグローバル エラー コンポーネントもあります。