#003 #리액트 라우터 돔

리액트 라우터 돔 설치

npm i react-router-dom
Java
복사

프로젝트 생성

App.js로 가보자.

파일 만들 때 대문자로 만들어야 된다.

이렇게 만들어 보자.

App.js 코드

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

function Router() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={} />
                <Route path="/about" element={} />
            </Routes>
        </BrowserRouter>
    );
}

export default Router;
Java
복사

페이지 만들기

src 내부에 페이지를 두개 만들어보자.

내부에는 이렇게 간단하게 만든다.

About도 만들자.

임포트 하기

App.js 내부에 라우터를 임포트 해야되는 데, 경로를 잘 봐야 된다.

import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
import "./App.css";
import About from "./page/About";
import Home from "./page/Home";

function App() {
  return (
    <BrowserRouter>
      <div>
        <Link to="/">홈</Link>
        <Link to="/about">소개</Link>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;
Java
복사

하이퍼 링크가 아니라, 페이지가 리로딩 되는 경우가 아니라, 내부에 그림이 다시 그려지는 것.

location href 만들기

앱 파일 만들기 App.js

Home.js 생성

navigate를 사용해서 버튼에 링크를 달 수 있다.

info.js 생성

App에도 추가.

:id 로 동적 변수를 바인딩 할 수있다.

info.js 는 userParam으로 구조분해 할당 할 수 있다.

about.js 버튼 만들기

여기 버튼은 moveInfo라고 하자

1212 값을 들고 온것을 확인

import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import Nav from "./components/Nav";
import About from "./page/About";
import Home from "./page/Home";
import Info from "./page/Info";

function App() {
  return (
    <BrowserRouter>
      <Nav />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/info/:id" element={<Info />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;
Java
복사

import React from "react";
import { Link } from "react-router-dom";

function Nav(props) {
  return (
    <div>
      <Link to="/">홈</Link>
      <Link to="/about">소개</Link>
    </div>
  );
}

export default Nav;
Java
복사

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

function Home(props) {
  const navigate = useNavigate();

  function moveAbout() {
    navigate("/about");
  }

  return (
    <div>
      <h1>Home</h1>
      <button onClick={moveAbout}>소개페이지이동</button>
    </div>
  );
}

export default Home;
Java
복사

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

function Info(props) {
  const { id } = useParams();

  return (
    <div>
      <h1>Info 번호 : {id}</h1>
    </div>
  );
}

export default Info;
Java
복사

쿼리 스트링 연습

쿼리스트링 공부보고 연습하기

[React] 쿼리 스트링(Query String)

URL의 한 부분으로서, 요청하고자 하는 URL에 부가적인 정보를 포함하고 싶을 때 사용 (구체적으로 더 정렬되고 특정된 형태의 정보를 요청) 형태 쿼리스트링: key=value 형태의 문자열로 표현 (key=value 페어의 개수 제한은 없음) ? : 쿼리스트링의

https://velog.io/@leah1225/React-쿼리-스트링Query-String

두번째 방

import React from "react";
import { useNavigate, useParams } from "react-router-dom";

function Info(props) {
  const { id } = useParams();

  const navigate = useNavigate();

  function moveList() {
    navigate(`/list?page=0`);
  }

  return (
    <div>
      <h1>Info 번호 : {id}</h1>
      <button onClick={moveList}>리스트페이지이동</button>
    </div>
  );
}

export default Info;
Java
복사

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

function List(props) {
  const [searchParams, setSearchParams] = useSearchParams();
  let page = searchParams.get("page");

  // 두번째 방법
  //const navigate = useNavigate();

  function next() {
    // 쿼리스트링 값이 변경되면서 화면 새로 불러짐
    setSearchParams({ page: Number(page) + 1 });

    //let newPage = Number(page) + 1;
    //navigate("/list?page=" + newPage);
  }

  console.log("화면 새로 불러짐");
  return (
    <div>
      <h1>List page : {page}</h1>
      <button onClick={next}>다음페이지</button>
    </div>
  );
}

export default List;
Java
복사