React を使用して 3 つのページを構築しています。各ページには独自の CSS ファイルがあり、各ページに CSS ファイルは 1 つだけあります。

Question

私は次の 3 つのページに取り組んでいます。 App.js には 2 つのボタンがあり、最初のボタンをクリックすると「/quotes」ページに移動し、2 番目のボタンをクリックすると「/recommendations」ページに移動します。 3 つの HTML はすべて機能しますが、「/quotes」または「/recommendations」に移動するたびに、App.js HTML コンテンツと CSS コンテンツが表示され続けます (非常に奇妙で壊れた方法で、非常に悪いように見えます)。 以下に例を示します:

これは私のコードです: アプリケーション.js:

リーリー

QuotePage.js：

リーリー

QuotePage.css (テストのためだけにこれを行いました):

リーリー

おすすめページ.js：

リーリー

おすすめページ.css:

リーリー

ここに何か不足がある場合は申し訳ありません。ここにあるかどうかを簡単に確認していただければ幸いです: https://github.com/vitoriaacarvalho/my-taylor-swift-api/tree /マスター/前

私を助けようとしてくれた皆さん、本当にありがとう! <3

Answer 1

初心者がよく遭遇する罠に陥っていると思います。それは HTML のような構造ではないということです。

これは完全に正しいわけではありませんが、React には app.js という 1 つの画面/ページしかないと考えることから始めると役に立ちます。コンポーネントを使用して、追加のコンテンツをこのページに取り込むことができます。これを管理ステータスといいます。

このコードはすべて app.js にあるため、引き続き表示されます。あなたがしなければならないことは、別のファイル（例：「home.js」）を作成し、その中にこのコードを置くことです。

次に、画面上の内容を変更できるように、react-router-dom などのツールを使用してルーティングする必要があります。

これを完了すると、React がどのように機能するかを理解し始めるでしょう。

＃＃＃それで：＃＃＃

すべてを home.js という新しいファイルに移動します

1. npm を使用して React-router-dom をインストールします
2. navbar.js という新しいファイルを作成し、それを使用して Web サイトのナビゲーション バーを作成します
3. 完了したら、app.js のコンポーネントとして navbar.js を呼び出すだけです
4. ページをルートとして追加します
react-router-dom を読む必要がありますが、非常に簡単です