React 페이지에서 JSX를 가져와 탐색 모음 만들기

Question

편집 1: 원래 질문: React

를 사용하여 단일 페이지 애플리케이션을 만드는 방법

질문이 충분히 구체적이지 않고 이전에 답변된 적이 있으므로 Imran Rafiq 차라리의 답변에서 React-routing을 배워야 합니다

편집 2: 보다 구체적인 사용 사례를 위해 질문을 다시 작성하고 다시 엽니다.

React-route를 사용하여 페이지를 라우팅하는 방법을 배우기 위해 튜토리얼을 따르고 있습니다. 지금까지는 createBrowserRouter() 구성 요소의 createRoutesFromElements 함수 내에 <Route> 태그를 추가해야 한다는 것을 알고 있습니다.

으아악

각 "element="에서는 모듈 방식으로 생성된 페이지를 가져옵니다. 내용은 다음과 같습니다.

튜토리얼

의 RootLayout.js 으아악

JSX React Bootstrap으로 생성된 이전 구성 요소가 있는 경우 코드는 다음과 같습니다.

NavbarLayout.js

으아악

그러면 경로는 다음과 같습니다:

으아악

구성요소가 오류 없이 내 페이지에 표시되지 않는 이유는 무엇입니까?

Answer 1

JS 구성 요소를 일반 index.html 파일에 넣으려고 합니다.

으아악

전혀 해당되지 않습니다. ReactJS와 같은 라이브러리를 사용하면 내부적으로 JavaScript 자체인 ReactDOM.render(<App/>, document.querySelect('#root')) 라이브러리를 통해 모든 기초 작업을 완료했습니다. 따라서 이 경우 단일 페이지 적용이란 id='root'인 하나의 요소를 사용하고 해당 요소에 모든 코드를 넣는 것을 의미합니다.

그러므로 이는 올바른 접근 방식이 아닙니다. 이런 방식으로 단일 페이지 애플리케이션을 시작하면 후속 문제는 말할 것도 없고 작동하지 않습니다.