리액트 질문입니다.

해결된 질문

작성

106

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="Menu" element={<Menu />} />
          <Route path="Location" element={<Location />} />
          <Route path="Contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

안녕하세요, 리액트 초보자 입니다. Layout 컴포넌트의 메뉴 바를 이용해서 라우트를 하는데, 처음 페이지 접속시 Home 컴포넌트를 노출하고 싶은데 처음에 Nopage 가 나옵니다.. 해결 방법이 있을까요?

답변 1

console.log()

레이아웃에서 path를 빼고 Home의 경로를 path="/" 로 바꿔주세요.

그리고 하단 NoPage 부분도 "/*" 로 바꿔보세요

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<Layout />}>
          <Route path="/" element={<Home />} />
          <Route path="Menu" element={<Menu />} />
          <Route path="Location" element={<Location />} />
          <Route path="Contact" element={<Contact />} />
          <Route path="/*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

win401

질문자

답변 감사드립니다!! 근데,, 이렇게 해도 초기 페이지가 NoPage 가 노출됩니다... 다른 부분 문제인걸까요..? ㅠㅠ

console.log()

레이아웃 쪽 코드를 볼 수 있을까요?

win401

질문자

// Layout.js
import React from "react";
import { Outlet, Link } from "react-router-dom";
import "../styles/Layout.css";

const Layout = () => {
  return (
    <>
      <nav>
        <p>Everyday’s another holiday</p>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/Menu">Menu</Link>
          </li>
          <li>
            <Link to="/Location">Location</Link>
          </li>
          <li>
            <Link to="/Contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Outlet />
    </>
  );
};

export default Layout;

넵 Layout.js 코드입니다.!

console.log()

제가 질문자님과 동일하게 셋팅해봤을때는 잘 나오는데, 라우터가 중복된 부분이나 상위에서 리다이렉트 되는 부분이 있을까요?

win401

질문자

이부분에서 path='/해당프로젝트이름' 으로 변경하니 해결되었습니다.. 감사합니다//!!

인프런 커뮤니티 질문&답변

리액트 질문입니다.