[React] 기초(5) - route

yarn create react-app route-react

 

 

터미널에

yarn add react-router-dom

설치

 

src폴더에

Main.js 생성

export default function Main() {
    return (
        <div>
            메인페이지
        </div>
    );
}

Temp.js 생성

export default function Temp() {
    return (
        <div>
            임시페이지
        </div>
    );
}

 

App.js 수정

import logo from './logo.svg';
import './App.css';
import {BrowserRouter, Route, Routes} from "react-router-dom";
import Temp from "./Temp";
import Main from "./Main";

function App() {
  return (
    <div>
        <BrowserRouter>
            <Routes>
                <Route path={"/"} element={<Main />} />
                <Route path={"temp"} element={<Temp />} />
            </Routes>
        </BrowserRouter>
    </div>
  );
}

export default App;

주소를 입력하면 화면이 바뀐다.

 

 

---

Main.js 수정

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

export default function Main() {
    return (
        <div>
            <div>메인페이지</div>
            <Link to={"/temp"}>임시페이지로 이동</Link>
        </div>
    );
}

Temp.js 수정

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

export default function Temp() {
    return (
        <div>
            <div>임시페이지</div>
            <Link to={"/"}>메인페이지로 이동</Link>
        </div>
    );
}

 

Link to 를 사용해서 링크를 걸면

주소가 잘 바뀐다

 

useNavigate()를 사용해도 주소를 이동시킬 수 있다.

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

export default function Main() {

    const navigate = useNavigate();

    const goTempPage = () => {
        navigate("/temp");
    }

    return (
        <div>
            <div>메인페이지</div>
            {/*<Link to={"/temp"}>임시페이지로 이동</Link>*/}
            <button onClick={goTempPage}>임시페이지로 이동</button>
        </div>
    );
}