35일차

🦦

35일차

 

Part 10. React 로 쇼핑몰 만들기 (React 기본)

Ch 4. React Router

 

---

 

 

Ch 4. React Router

 

 

https://reactrouter.com/

Declarative routing for React apps at any scale | React Router

 

$ npm i react-router-dom

// App.js

import { BrowserRouter, Route, Routes } from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
import Profile from "./pages/Profile";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

 

 🔗 Dynamic 라우팅 

 

/profile/1

// App.js

import { BrowserRouter, Route, Routes } from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
import Profile from "./pages/Profile";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile/*" element={<Profile />}>
          <Route path=":id" element={<Profile />} />
        </Route>
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

// Profile.jsx

import { useParams } from "react-router-dom";

export default function Profile() {
  const params = useParams();
  const id = params.id;
  console.log(id, typeof id);

  return (
    <div>
      <h2>Profile 페이지입니다.</h2>
      {id && <p>id는 {id} 입니다.</p>}
    </div>
  );
}

 

/about?name=mark

https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams

URLSearchParams - Web API | MDN

https://github.com/sindresorhus/query-string

GitHub - sindresorhus/query-string: Parse and stringify URL query strings

$ npm i query-string

// About.jsx

import { useLocation } from "react-router-dom";
import queryString from "query-string";

export default function About(props) {
  const location = useLocation();
  const searchParams = location.search;
  console.log(searchParams);

  // const obj = new URLSearchParams(searchParams);
  // console.log(obj.get("name"));

  const query = queryString.parse(searchParams);
  console.log(query);

  return (
    <div>
      <h2>About 페이지입니다.</h2>
      {query.name && <p>name 은 {query.name} 입니다.</p>}
    </div>
  );
}

 

 

 🔗 Switch와 NotFound  => v6에서 Switch 사라짐 !!!!!!

 

import { BrowserRouter, Route, Routes } from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
import NotFound from "./pages/NotFound";
import Profile from "./pages/Profile";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile/*" element={<Profile />}>
          <Route path=":id" element={<Profile />} />
        </Route>
        <Route path="/about/*" element={<About />} />
        <Route path="/*" element={<NotFound />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

 

 🔗 JSX 링크로 라우팅 이동하기 

 

<NavLink></NavLink>
active 상태에 대한 스타일 지정이 가능하다.

<Links /> 찾을 수 없다고 떠서 임시방편으로 본문에 직접 코드 넣었음;;;

// App.js

import { BrowserRouter, Route, Routes, Link } from "react-router-dom";
// import Links from "./components/Links";
import NavLinks from "./components/NavLinks";
import About from "./pages/About";
import Home from "./pages/Home";
import NotFound from "./pages/NotFound";
import Profile from "./pages/Profile";

function App() {
  return (
    <BrowserRouter>
      {/* <Links /> */}
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/profile">Profile</Link>
        </li>
        <li>
          <Link to="/profile/1">Profile/1</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/about?name=mark">About?name=mark</Link>
        </li>
      </ul>
      <NavLinks />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile/*" element={<Profile />}>
          <Route path=":id" element={<Profile />} />
        </Route>
        <Route path="/about/*" element={<About />} />
        <Route path="/*" element={<NotFound />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

// NavLinks.jsx

import { NavLink } from "react-router-dom";

const activeStyle = { color: "green" };

export default function NavLinks() {
  return (
    <ul>
      <li>
        <NavLink
          to="/"
          // end
          style={({ isActive }) => (isActive ? activeStyle : undefined)}
        >
          Home
        </NavLink>
      </li>
      <li>
        <NavLink
          to="/profile"
          end
          style={({ isActive }) => (isActive ? activeStyle : undefined)}
        >
          Profile
        </NavLink>
      </li>
      <li>
        <NavLink
          to="/profile/1"
          style={({ isActive }) => (isActive ? activeStyle : undefined)}
        >
          Profile/1
        </NavLink>
      </li>
      <li>
        <NavLink
          to="/about"
          style={({ isActive }) => (isActive ? activeStyle : undefined)}
          // isActive={(match, location) => {
          //   console.log(location);
          //   return location.search === "";
          // }}
        >
          About
        </NavLink>
      </li>
      <li>
        <NavLink
          to="/about?name=mark"
          style={({ isActive }) => (isActive ? activeStyle : undefined)}
          // isActive={(match, location) => {
          //   console.log(location);
          //   return location.search === "";
          // }}
        >
          About?name=mark
        </NavLink>
      </li>
    </ul>
  );
}

 

 

 🔗 JS 로 라우팅 이동하기 

 

// Login.jsx

import LoginButton from "../components/LoginButton";

export default function Login() {
  return (
    <div>
      <h2>Login 페이지 입니다.</h2>
      <LoginButton />
    </div>
  );
}

// LoginButton.jsx

import { useNavigate } from "react-router-dom";

export default function LoginButton(props) {
  const navigate = useNavigate();
  console.log(props);

  function login() {
    setTimeout(() => {
      // 페이지를 이동
      navigate("/");
    }, 1000);
  }

  return <button onClick={login}>로그인하기</button>;
}

 

 

 🔗 Redirect  => v6에서 Redirect 사라짐 !!!!!!

 

import { BrowserRouter, Route, Routes, Link, Navigate } from "react-router-dom";
// import Links from "./components/Links";
import NavLinks from "./components/NavLinks";
import About from "./pages/About";
import Home from "./pages/Home";
import NotFound from "./pages/NotFound";
import Profile from "./pages/Profile";
import Login from "./pages/Login";

const isLogin = true;

function App() {
  return (
    <BrowserRouter>
      ...
      <Routes>
        <Route
          path="/login"
          element={isLogin ? <Navigate replace to="/" /> : <Login />}
        />
       ...
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

 

---

 

 

 리액트 강의가 v5 기준이어서 v6 코드로 바꾸고 계속 자료 찾느라 생각 했던 거 보다 공부 시간이 더 걸렸다 흑흑 기본 내용이라 그런지 거의 모든 것이 바뀌었다....ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ v6 강의 였으면 좋았을텐데 아쉽ㅠㅠ  너무 졸리다 내일 학교 가야 하는데👯‍♀️👯‍♀️ 리액트는 엄청 빨리 바뀐다고 하는데 정말 맞는 거 같다 까탈레나~~~~~~~💃 빨리 자야지 지금 약간 정신이 나갔고 눈이 반달이 됐다 아무 말이나 막 쓰고 있는 거 같다 하하하하하ㅏㅏㅏㅏ 안녕 내일도 행복한 하루 아자아자.....