Nav바, Footer, 일부 페이지에서만 보이게 만드는 방법
프로젝트 진행 중, Hosting을 관리하는 페이지와 User가 보는 페이지 두 개가 완벽히 다른데, 각각 기능별로 또 공통된 자기만의 Nav와 Footer가 있는 것을 알게되었다. 내가 그 동안 했던 것은 페이지 전반에 걸쳐 공통된 Nav, Footer등의 컴포넌트가 있는 것이었는데, 이제 아 예 두 모드가 달라야 하는 것이었다. 어떻게 해 주면 될까 한참을 검색했고 아래와 같은 방법으로 적용하여 웹 사이트 내의 두 가지 모드를 구현해주었다.
1. Router.js를 아래와 같이 두 가지 모드로 만들어줌
(user / ) 뒤에 오는 은 그 이후에 다른 것이 붙을 수도 있다는 것을 의미해줍니다.
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Hosting from './pages/Hosting';
import User from './pages/User';
function Router() {
return (
<BrowserRouter>
<Routes>
<Route path="/user/*" element={<User />} />
<Route path="/hosting/*" element={<Hosting />} />
</Routes>
</BrowserRouter>
);
}
export default Router;
2. <User />, <Hosting />
컴포넌트 만든 후 그 안에 Router 넣어줌!
import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Nav from '../components/Nav/Nav';
import LoginSignup from '../components/Nav/Modal/LoginSignup';
import Main from './Main';
import Staydetail from './Staydetail';
import Staylist from './Staylist';
import Footer from './../components/Footer';
const Customer = () => {
return (
<>
<Nav />
<LoginSignup />
<Routes>
<Route path="/" element={<Main />} />
<Route path="/staylist" element={<Staylist />} />
<Route path="/staydetail" element={<Staydetail />} />
</Routes>
<Footer />
</>
);
};
export default Customer;
위 처럼 하면, Router를 아예 두 가지 모드로 관리할 수 있게 된다! 3개 4개 그 이상도 다 가능하겠지? 😝
리액트 라우터 공식문서 참고! 🙂
역시나 찾고 찾았던 문제의 해결 답안은 공식문서에 있었다!!
Author And Source
이 문제에 관하여(Nav바, Footer, 일부 페이지에서만 보이게 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@minju1009/Nav바-Footer-일부-페이지에서만-보이게-만드는-방법저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)