[쿠킹레시피] 라우터 사용 및 네브바 컴포넌트 생성

 

pages폴더를 만들어 그 내부에 각 페이지 별 폴더를 만들어서 관리한다. 

 

컴포넌트와 다르게 각 페이지를 담당한다

 

 

 

라우터설치

 

 

App.jsx에서 

브라우저라우터로 

라우터를 사용한다. 

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./pages/home/Home";
import Create from "./pages/create/Create";
import Search from "./pages/search/Search";
import Recipe from "./pages/recipe/Recipe";
import "./App.css";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/create" element={<Create />} />
          <Route path="/search" element={<Search />} />
          <Route path="/recipes/:id" element={<Recipe />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

 

레시피는 id가 들어감 

 

.

각 주소로 테스트하기 

 

 

 

레시피는 id가 있어야 하므로 기재한다

 

 

 

 

 

Navbar.css

.navbar {
  background: #58249c;
  padding: 20px;
  color: #fff;
}
.navbar nav {
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.navbar a.brand {
  margin-right: auto;
  color: #fff;
  text-decoration: none;
}
.navbar a:last-child {
  color: #fff;
  text-decoration: none;
  margin-left: 40px;
  padding: 8px;
  border: 1px solid #fff;
  border-radius: 4px;
}
.navbar a:last-child:hover {
  background: #fff;
  color: #333;
}

 

 

Navbar.jsx

import { Link } from "react-router-dom";
import "./Navbar.css";

export default function Navbar() {
  return (
    <div className="navbar">
      <nav>
        <Link to="/" className="brand">
          <h1>쿠킹 레시피</h1>
        </Link>
        <Link to="/create">레시피 만들기</Link>
      </nav>
    </div>
  );
}

 

 

App.jsx에 Navbar컴포넌트 추가 

 

레시피 만들기를 클릭하면 create로 이동한다.

(CSS 색상 수정함)