저는 React를 사용하여 3개의 페이지를 만들고 있습니다. 각 페이지에는 자체 CSS 파일이 있고 각 페이지에는 단 하나의 CSS 파일만 있습니다.

Question

저는 다음 세 페이지를 작업 중입니다. App.js에는 두 개의 버튼이 있습니다. 첫 번째 버튼을 클릭하면 "/quotes" 페이지로 이동하고 두 번째 버튼을 클릭하면 "/recommendations" 페이지로 이동합니다. 세 가지 모두에 대한 html은 작동하지만 "/quotes" 또는 "/recommendations"로 이동할 때마다 App.js html 콘텐츠와 CSS 콘텐츠가 계속 나타납니다(매우 이상하고 손상된 방식으로 매우 나쁘게 보입니다). 예는 다음과 같습니다.

내 코드는 다음과 같습니다. application.js:

으아아아

QuotePage.js:

으아아아

QuotePage.css(테스트를 위해 이 작업을 수행했습니다):

으아아아

RecommendationPage.js:

으아아아

추천 페이지.css:

으아아아

여기에 빠진 것이 있다면 죄송합니다. 여기에 있는지 잠깐 살펴보시면 정말 감사하겠습니다: https://github.com/vitoriaacarvalho/my-taylor-swift-api/tree/master /앞

저를 도와주신 모든 분들께 진심으로 감사드립니다! <3

Answer 1

초보들이 흔히 접하는 함정에 빠지고 있는 것 같습니다. HTML처럼 구조화되어 있지 않습니다.

이것이 전적으로 사실은 아니지만 React에는 app.js라는 하나의 화면/페이지만 있다고 생각하는 것이 도움이 됩니다. 구성 요소를 사용하여 이 페이지에 추가 콘텐츠를 가져올 수 있습니다. 이를 관리 상태라고 합니다.

app.js에 이 코드가 모두 있으므로 계속해서 표시됩니다. 당신이 해야 할 일은 별도의 파일(예: "home.js")을 만들고 그 안에 해당 코드를 넣는 것입니다.

그런 다음 화면에 표시되는 내용을 변경할 수 있도록 반응 라우터 돔과 같은 도구를 사용하여 경로를 지정해야 합니다.

이 과정을 완료하면 React가 어떻게 작동하는지 이해하기 시작할 것입니다.

그래서:

1. 모든 것을 home.js라는 새 파일로 옮깁니다
2. npm을 사용하여 React-router-dom을 설치하세요
3. navbar.js라는 새 파일을 생성하고 이를 사용하여 웹사이트의 탐색 모음을 생성하세요
4. 완료되면 app.js의 구성 요소로 navbar.js를 호출하세요
5. 페이지를 경로로 추가하세요

react-router-dom을 읽어야 하는데 매우 간단합니다