편집 1: 원래 질문: React
를 사용하여 단일 페이지 애플리케이션을 만드는 방법질문이 충분히 구체적이지 않고 이전에 답변된 적이 있으므로 Imran Rafiq 차라리의 답변에서 React-routing을 배워야 합니다
편집 2: 보다 구체적인 사용 사례를 위해 질문을 다시 작성하고 다시 엽니다.
React-route를 사용하여 페이지를 라우팅하는 방법을 배우기 위해 튜토리얼을 따르고 있습니다. 지금까지는 createBrowserRouter() 구성 요소의 createRoutesFromElements 함수 내에 <Route> 태그를 추가해야 한다는 것을 알고 있습니다.
으아악각 "element="에서는 모듈 방식으로 생성된 페이지를 가져옵니다. 내용은 다음과 같습니다.
튜토리얼
의 RootLayout.js 으아악JSX React Bootstrap으로 생성된 이전 구성 요소가 있는 경우 코드는 다음과 같습니다.
NavbarLayout.js
으아악그러면 경로는 다음과 같습니다:
으아악구성요소가 오류 없이 내 페이지에 표시되지 않는 이유는 무엇입니까?
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
JS 구성 요소를 일반
으아악index.html파일에 넣으려고 합니다.전혀 해당되지 않습니다. ReactJS와 같은 라이브러리를 사용하면 내부적으로 JavaScript 자체인
ReactDOM.render(<App/>, document.querySelect('#root'))라이브러리를 통해 모든 기초 작업을 완료했습니다. 따라서 이 경우 단일 페이지 적용이란 id='root'인 하나의 요소를 사용하고 해당 요소에 모든 코드를 넣는 것을 의미합니다.그러므로 이는 올바른 접근 방식이 아닙니다. 이런 방식으로 단일 페이지 애플리케이션을 시작하면 후속 문제는 말할 것도 없고 작동하지 않습니다.