리액트 질문입니다.
0
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
1
레이아웃에서 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>
);
};0
// 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 코드입니다.!
0
<Route path="/해당프로젝트 이름" element={<Home />} />
이부분에서 path='/해당프로젝트이름' 으로 변경하니 해결되었습니다.. 감사합니다//!!
강의 추천해주세요
2
29
1
케이테스트 서버 운영 방법
2
51
1
맥유저 입장의 고려해주세요
2
45
1
Image Only Query
1
32
2