react-router-dom

react-router-dom

현재 경로와 일치하는 컴포넌트를 렌더링 시켜주는 라이브러리

 

BrowserRouter

라우팅 범위를 지정

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

const App = () => {
  return (
    <BrowserRouter>
      {/* ... */}
    </BrowserRouter>
  );
}

export default App;

1. BrowserRouter 는 라우팅 범위를 감싸며, 내부에는 렌더링 시킬 컴포넌트들이 들어간다

2. 렌더링 시킬 컴포넌트들은 같은 src폴더에 있어야 한다. (외부에 있으면 에러)

 

Routes, Route

렌더링 시킬 컴포넌트와 범위를 지정

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

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/signin" element={<Signin />} />
        <Route path="/signup" element={<Signup />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

1. <Route> 컴포넌트의 path prop에는 경로, element 에는 해당 경로에서 렌더링 시킬 컴포넌트를 넣는다

2. <Route> 컴포넌트를 여러개 사용할 때는 <Routes>컴포넌트로 감싸야 한다

 

중첩 라우팅

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

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/">
          <Route index element={<Home />} />
          <Route path="signin" element={<Signin />} />
          <Route path="signup" element={<Signup />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

1. 중첩의 분기점이 될 지점에서 <Route>로 하위 라우팅 컴포넌트들을 감싼다

2. 하위 컴포넌트의 첫번째 <Route>에 index와 렌더링 시킬 element prop을 넣는다

3. 하위 라우팅 컴포넌트의 path에는 중첩 분기점이 되는 경로 이후의 경로를 넣는다

4. 위 예제에서는 경로가 category/guitar일 때 <Guitar> 컴포넌트가 렌더링 된다 

 

공용 컴포넌트

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

const App = () => {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="/">
          <Route index element={<Home />} />
          <Route path="signin" element={<Signin />} />
          <Route path="signup" element={<Signup />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

1. BrowserRouter 컴포넌트와 Routes, Route 컴포넌트 사이에 위치한 컴포넌트는 컴포넌트 내의 모든 컴포넌트에서 렌더링되는 공용 컴포넌트가 된다

 

useParams

경로를 동적으로 받아오는 Hook

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

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/">
          <Route index element={<Home />} />
          <Route path="signin" element={<Signin />} />
          <Route path="signup" element={<Signup />} />
          <Route path="category">
            <Route index element={<Category />} />
            <Route path="guitar">
              <Route index element={<Guitar />} />
              <Route path=":brand" element={<GuitarBrand />} />
            </Route>
            <Route path="bass">
              <Route index element={<Bass />} />
              <Route path=":brand" element={<BassBrand />} />
          </Route>
        </Route>
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

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

const GuitarBrand = () => {
  const { brand } = useParams();

  return <p>{brand}</p>;
}

export default GuitarBrand;

console.log(useParams())

1. 경로가 "guitar" 이후에 올 경로를 ":brand" 라는 path 파라미터로 받는다

2. useParams로 경로를 가져올 때, path 파라미터와 이름이 일치해야 한다

 

Link

지정한 경로로 페이지를 이동시켜주는 컴포넌트

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

const Home = () => {
  return(
    <ul>
      <li><Link to="signin">Login</Link></li>
      <li><Link to="signup">SignUp</Link></li>
    </ul>
  )
}

1. to 속성에 지정한 경로로 이동한다

2. 이동할 경로의 앞에 /를 붙히면 절대경로, 붙히지 않으면 상대경로

 

useNavigate

지정한 경로로 페이지를 이동시키는 메서드

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

const Home = () => {
  const navigate = useNavigate();
  
  const submit = (e) => {
    e.preventDefault();
    navigate(e.target[0].value);
  }
  
  return(
    <form submit={submit}>
      <input />
      <button>Click</button>
    </form>
  )
}

1. 인자로 받은 경로로 이동하는 메서드

2. 이동할 경로 앞에 /를 붙히면 절대경로, 붙히지 않으면 상대경로