[React] react-router-dom 설치 (Ing...)

1. npm install 

npm install react-router-dom

2. 기본 route 형식

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

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

export default App;

자세한건 공식문서 참고 

https://reactrouter.com/docs/en/v6/getting-started/overview

React Router | Overview

...Ing 

공부하면서 계속 업데이트 될 페이지

---

<Link to ={} > props 값 전달 불가능 

react-router-dom v6 부터는 더이상 link to 로 props 전달이 불가능하다.

따로 server에 데이터를 요청해서 받는 식으로 데이터를 받아야 한다.

pathname 까지는 작동합니다, state/props만 불가능 합니다.

- 이것두 모르고 한종일 삽.....

---

react-router-dom v6 {useNavigate}

useNavigate는 <Link to={}> 처럼 특정 페이지로 보내주는 역할을 합니다.

import React from 'react'
import styled from 'styled-components'
import { useNavigate  } from 'react-router-dom'
function Login() {
  let navigation = useNavigate();
  const onClick = () => {
    navigation('/signup')
  }
  return (
      <AccountButton onClick={onClick}>Create Account in Amazon</AccountButton>
  )
}

AccountButton을 클릭하면 useNavigate() 효과로 인해서

'/signup' 페이지로 이동시켜 줍니다.

navigation(-1) 이런식으로 적어서 뒤로가기 효과도 가능합니다.