[리액트(React)] 9. 리액트라우터(react-router-dom)

깊게 공부하지 말고 기본적인 페이지 라우팅만 공부해보자

---

1. 설치

npm install react-router-dom

 

yarn add react-router-dom

 

2. 사용법

// App.js
import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Setting from './components/setting';
import Home from './components/home';

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

export default App;

 

// components/home.jsx
import React from 'react';
import { useNavigate } from 'react-router-dom';

const Home = (props) => {
  const navigate = useNavigate();
  return(
    <>
      <h1>Home</h1>
      <button onClick={()=>navigate('/Setting')}>Setting으로 이동</button>
    </>
  );
  }

export default Home;

 

// components/setting.jsx
import React from 'react';
import { useNavigate } from 'react-router-dom';

const Setting = (props) => {
  const navigate = useNavigate();
  return(
    <>
      <h1>Setting</h1>
      <button onClick={()=>{navigate('/')}}>Home으로 이동</button>
    </>
  );
  }

export default Setting;

 

버튼을 클릭하면

 

Setting페이지로 이동이 된다

 

3. Link 사용법

// App.js
import './App.css';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Setting from './components/setting';
import Home from './components/home';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to='/'>Home</Link>
        <Link to='/setting'>Profile</Link>
      </nav>
      <Routes>
        <Route path='/' element={<Home/>}/>
        <Route path='/setting' element={<Setting/>}/>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

4. useNavigate 사용법

useNavigate의 인자를 살펴보면 (delta:number)아니면 (to: To, options?: NavigateOptions)이다.

options에는 replace나 state값을 함께 전달 할 수 있다.

 

const navigate = useNavigate();
// 이전페이지 이동
navigate(-1)
// 다음페이지 이동
navigate(+1)

 

const navigate = useNavigate();
// to 사용 (options는 ?이여서 있어도 되고 없어도 된다)
navigate('/HOME')

 

const navigate = useNavigate();
// options에 state전달
navigate('/HOME', {state: {id:1, name:'2HS'}})