리액트 라우팅을 이렇게 하는게 맞는지 모르겠습니다..

도움이 될지 모르겠지만 이렇게 시도해보세여 import routes from './routes'; import { createBrowserRouter, RouterProvider } from 'react-router-dom'; const router = createBrowserRouter(routes); function App() { const container = document.getElementById('root'); if (!container) { return; } const root = ReactDOM.createRoot(container); root.return (( <RouterProvider router={router} /> )); } App 파일 -------------------------------------------------------- import WigTemplate from "./components/wigtemplate"; import Layout from './components/Layout'; const routes = [ { element: <Layout />, children: [ { path: '/', element: <WigTemplate /> }, // 추가 ], }, ]; export default routes; app이랑 같은 라인에 routes파일 ------------------------------------------------------------------------ import { Outlet } from 'react-router-dom'; import Header from './Header'; export default function Layout() { return ( <Container> <Header /> <Outlet /> </Container> ); } components 폴더안에 Layout파일 ------------------------------------------------------------------------ import { Link} from 'react-router-dom' export default function Header() { return ( <div> <nav> <ul> <li> <Link to="/">WigTemplate??</Link> </li> </ul> </nav> </div> ); } components 폴더안에 header 파일

안녕하세요! 리액트 라우팅에 대한 고민을 알려주셔서 감사합니다. 코드를 살펴보면서 몇 가지 제안을 해드릴게요. 1. 중첩된 라우트와 컴포넌트 구조: 현재 코드에서 중첩된 라우트를 구현하려고 시도하셨는데, 중첩된 라우트를 구현하는 방법에는 여러 가지가 있습니다. 일반적으로 중첩된 라우트를 구현하려면 부모 컴포넌트와 자식 컴포넌트를 활용하여 구조를 만들어야 합니다. 예를 들어, App.js에서 라우트 구조를 다음과 같이 변경할 수 있습니다: 이렇게 하면 / 경로에 대한 라우트에 중첩된 라우트가 설정되고, 'WigTemplate' 컴포넌트에 중첩된 자식 컴포넌트들이 나타날 수 있습니다. 따라서 'WigTemplate' 컴포넌트에서는 'WigFind', 'WigLoginButton' 등의 컴포넌트를 자식으로 가질 수 있습니다. 2. 컴포넌트 구조화: App.js에 모든 컴포넌트를 직접 작성하는 대신, 각 페이지에 해당하는 컴포넌트를 만들어 관리하는 것이 코드 구조화에 도움이 됩니다. 예를 들어, 'FindId', 'FindPwd', 'SignIn'과 같은 각각의 페이지 컴포넌트를 만들고, 해당 컴포넌트에서 필요한 하위 컴포넌트들을 구성하도록 할 수 있습니다. 3. 컴포넌트 재사용성: 현재 코드에서 'WigFind' 컴포넌트는 로그인 페이지에만 사용되는 것으로 보입니다. 이러한 경우, 'WigFind' 컴포넌트를 'WigTemplate' 컴포넌트 내부에 직접 작성하는 대신, 'WigTemplate' 컴포넌트의 하위 컴포넌트로 만들어 재사용성을 높일 수 있습니다. 그리고 로그인 페이지 외의 다른 페이지에서도 해당 컴포넌트를 필요로 할 때 사용할 수 있습니다. 위의 제안들을 참고하여 코드를 조정하고 페이지 구조를 재구성해보세요. 이렇게 하면 App.js에 들어가는 코드 양을 줄이고, 페이지별 컴포넌트를 모듈화하여 재사용성과 코드 가독성을 높일 수 있을 것입니다. 계속 공부하며 개발을 진행하시면서 더 많은 경험과 지식을 쌓을 수 있을 것입니다. 화이팅하세요!

1function App() {
2  return (
3    <Routes>
4      <Route path="/" element={<WigTemplate />}>
5        <Route path="/findId" element={<FindId />} />
6        <Route path="/findPwd" element={<FindPwd />} />
7        <Route path="/signIn" element={<SignIn />} />
8      </Route>
9      <Route path="*" element={<NotFound />} />
10    </Routes>
11  );
12}