[React] react-router (Switch, Link, exact, render, useHistory)

Switch

<Switch>라는 태그는 자식인 <Route>들 중에서 현재 URL과 일치하는 첫번째 것을 렌더해준다.

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import "./app.css";
import Home from "./components/home";
import Profile from "./components/profile";

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/home">
          <Home />
        </Route>
        <Route path="/profile">
          <Profile />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

이렇게 작성하면 경로에 맞는 컴포넌트를 렌더해주는 것이다.

 

Link

Switch 안에서가 아니더라도 Link를 이용하면 원하는 컴포넌트로 이동할 수 있다.

(마치 html의 a 태그의 a href 같은 것이라고 생각하면 된다.

실제로 Link로 작성한 태그는 개발자 도구를 통해 소스코드를 확인해보면 a 태그로 바뀌어있다.)

import React from "react";
import { BrowserRouter, Link, Route, Switch } from "react-router-dom";
import "./app.css";
import Home from "./components/home";
import Profile from "./components/profile";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/profile">Profile</Link>
      </nav>
      <Switch>
        <Route path="/">
          <Home />
        </Route>
        <Route path="/profile">
          <Profile />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

 

하나의 컴포넌트를 두 개 이상의 경로에서 보여주고 싶을 때

- "/"랑 "/home"일 때 둘 다 Home 컴포넌트를 렌더해주고 싶다면 Route의 path에 배열로 경로를 넣어주면 된다.

<Route path={["/", "/home"]}>
  <Home />
</Route>

 

exact

import React from "react";
import { BrowserRouter, Link, Route, Switch } from "react-router-dom";
import "./app.css";
import Home from "./components/home";
import Profile from "./components/profile";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/profile">Profile</Link>
      </nav>
      <Switch>
        <Route path={["/", "/home"]}>
          <Home />
        </Route>
        <Route path="/profile">
          <Profile />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

위와 같은 코드에서 실행해보면 "/profile"로 갔을 때 Home 컴포넌트가 렌더가 된다.

이는 exact를 설정해주어야 한다.

exact가 true이면 경로가 location.path name과 정확히 일치하는 경우에만 컴포넌트를 보여준다.

(예를 들면 "/가나다" 라는 경로에 가나다 컴포넌트를 추가했다면 exact가 기본으로는 false이기 때문에 "/가나다/마바사" 이렇게 "/가나다"가 들어가기만 하면 가나다 컴포넌트가 보인다고 생각하면 된다.

정확한 경로일 때에만 해당 컴포넌트를 보여주고 싶다면 exact={true}를 붙여주어야 한다.)

 

어떤 이벤트가 발생했을 때 다른 경로로 이동하고 싶다면 (history.push(path))

import React from "react";

const Home = (props) => {
  const { history } = props;
  const goProfile = () => {
    // profile로 이동하는 코드 작성
    history.push("/profile");
  };
  return (
    <>
      <h1>Home</h1>
      <button onClick={goProfile}>profile로 이동하기</button>
    </>
  );
};

export default Home;

Home 컴포넌트에서 버튼을 누르면 profile로 이동하고 싶다고 한다면

route 관련 props에서 history를 받아와서 history.push("원하는경로")를 해야 한다.

이렇게 route 관련 props를 받아오기 위해서는 route에서 컴포넌트를 렌더할 때 (렌더하는 방법에 대해서는 이전 게시글 참조)

인라인으로 component를 넣어주던가 render를 이용해서 렌더해주어야 한다. 위와 같이 그냥 route의 자식으로 컴포넌트를 넣었다면 props로 아무것도 받아올 수가 없는데, 이 때에는 useHistory라는 hook을 이용하면 된다.

 

useHistory로 history 받아오기

import React from "react";
import { useHistory } from "react-router";

const Home = (props) => {
  const history = useHistory();
  const goProfile = () => {
    // profile로 이동하는 코드 작성
    history.push("/profile");
  };
  return (
    <>
      <h1>Home</h1>
      <button onClick={goProfile}>profile로 이동하기</button>
    </>
  );
};

export default Home;

useHistory는 정말 유용한 hooks이다.

이것만 사용하면 props로 받아올 필요 없이 history를 사용할 수 있다.