브라우저라우터/ 라우터s와 링크!

• 프로파일 관련된 컴포넌트처리
• 링크처리
• 라우터처리

App.js 파일에 Profile 컴포넌트를 호출하는 링크와 Route를 추가
import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Profile from "./Profile";

function App() {
  return (
    <BrowserRouter>
      <ul>
        <li><Link to="/">홈</Link></li>
        <li><Link to="/about">소개</Link></li>
        <li><Link to="/info">정보</Link></li>
        <li><Link to="/profile/mrgo">고길동 프로파일</Link></li>
        <li><Link to="/profile/mrhong">홍길동 프로파일</Link></li>
        <li><Link to="/profile/none">없는 프로파일</Link></li>
      </ul>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/info" element={<About />} />
        <Route path="/profile/:userid" element={<Profile />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

3시 30분 부터의 강의록

매일매교시매순간 새로운걸 계속 극복해내는중....... 한번들어서 이해되는것도 아니라서
일주일정도 지나니 조금 마음을 내려놓고, 근육통에서 벗어나고 있다..
첫주에는 너무 어꺠 허리 목이 아파서 고생했다

쿼리스트링을 이용한 가변 데이터 처리(?)

유즈로케이션 http://localhost:3000/about?deatil=true 리액트창주소에 치니까

:로케이션 쿼리는 삭제..

유즈써치파람스 useSearchParams 훅을 사용하도록 :
About 컨포넌트에서 수정하기
변수하나를 searchParams, setSearchParams로 변수를 두개 만들고,
detail은 셋서치파람스의(디테일)로 가져와서 트루인지 펄스인지 확인하고 보여주기.

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

export default function About() {
    /*
    const location = useLocation();
    const quries = qs.parse(location.search, { ignoreQueryPrefix: true });
    */

    const [searchParams, setSearchParams] = useSearchParams();
    const detail = searchParams.get("detail");

    return (
        <div>
            <h1>About</h1>
            <h2>리액트 라우트 연습</h2>
            {
                detail === "true" && <h2>상세 내역입니다.</h2>
            }
        </div>
    );
}

서브라우트=중첩라우트 nested inner/ router라고 부른다
프로파일을 클릭시, 아래쪽에 홍길동, 고길동, 없는 프로파일이 하위메뉴(서브페이지)만들때 처럼....!

라우터를 프로파일s로 이동하게 끔...만들어주기!

효과는? 무엇일까요? 하나 통합관리가 가능합니다, 서브메뉴처럼 쓸수 있다! 공통레이아웃을 적용할떄도 쓸수 있당

공통 레이아웃 컴포넌트!

중첩라우트와 Outlet컴포넌트이용해서 각페이지(컴포넌트)에서 공통적으로 보여줘야 하는 레이아웃 처리시 유용하당.

|브라우저라우터
|----라우트s
|------ | 라우트 엘리먼트
|------------ || 라우트 패쓰 "/" 엘리먼트 = 홈
|-------------- 라우트 패쓰 / about 엘리먼트 = 어바웃
|-------------- 라우트 패쓰 / info 엘리먼트 = 어바웃
|-------------- 라우트 패쓰 /profiles 엘리먼트 = 프로파일
|------------------ 라우트 패쓰 :userid 엘리먼트 = 프로파일
|------------ || 라우트
|------ | 라우트
|---- 라우트s
|브라우저라우터