리액트 14강

import React from "react";
import {
    BrowserRouter,
    Routes,
    Route,
    Link,
    useNavigate,
} from "react-router-dom";
export default function BasicExample() {
    return (
        <BrowserRouter>
            <button>
                <Link to="/home">Home</Link>
            </button>
            <button>
                <Link to="/">Index</Link>
            </button>
            <Routes> //경로가 바뀌면 Routes컴포넌트는 하위에 있는 Route컴포넌트들 중에 하나를 찾음
                <Route exact path="/" element={<Index />} /> //찾는 기준은 path가 정확하게 일치하는지를 기준으로
                <Route path="/home" element={<Home />} /> //경로가 /home이면 element어트리뷰트에 들어있는 <Home />이라는 컴포넌트가 리턴돼서 home이 렌더링 됨
            </Routes>
        </BrowserRouter>
    );
}
function Index() {
    let navigate = useNavigate(); //useNavigate를 사용하면 navigate라는 객체가 나오고 
    function handleClick() { // 이게 클릭이 되면
        navigate("/home"); //navigate객체에 /home경로전달->리액트에서 나타나는 현재 경로를 바꿔줄 수 있음, navigate는 입력받은 경로로 이동함
    }
    return (
        <>
            <h2>Index</h2>
            <button type="button" onClick={handleClick}>
                Go home
            </button>
        </>
    );
}
function Home() {
    return (
        <>
            <h2>Home</h2>
            <p>This is home</p>
        </>
    );
}