React Router 사용

react-router-dom에서 Router(BrowserRouter), Switch, Route, Link 등의 기능을 제공해줍니다.

return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );

• Router 사용
  • Router 태그로 return 하는 전체 태그를 감싸줍니다.
• Link 사용

  • Link to 속성 뒤에 원하는 경로를 문자열로 해서 연결시켜줍니다.

    <Link to="/about">About</Link>

• Route 사용
  • Route 태그 하나당 한 개의 페이지를 보여줍니다.
  • path를 사용해 Link to의 위치와 같이 연결해줍니다.

    <Link to="/about">About</Link>  

    <Route path="/about">
    	<About />
    </Route>

• Switch 사용 주의!

  <Route path="/users">
    <h1>Users</h1>
  </Route>
  <Route path="/">
    <h1>Home</h1>
  </Route>

  Route 태그에 path를 적용할 때 위의 코드처럼 path 속성 경로에 / 가 공통적으로 들어가면서 경로를 /users로 들어가도 두 경로가 같다고 인식되어 Home과 Users가 모두 화면에 나타납니다. 이는 경로 인식을 /단위로 하기 때문에 발생하는 오류입니다. 이런 오류가 생길 때 한 개씩 매치시켜주기 위해 사용하는 것이 Switch 입니다.

  • Route를 Switch 태그로 묶어줍니다.

    <Switch>
      <Route path="/users">
        <h1>Users</h1>
      </Route>
      <Route path="/">
        <h1>Home</h1>
      </Route>
    </Switch>

exact

경로 인식 문제가 생길 때 Switch를 사용하기도 하지만 exact를 사용하여 오류를 해결할 수 도 있습니다.

<Route path="/" exact>
  <h1>Home</h1>
</Route>
<Route path="/users">
  <h1>Users</h1>
</Route>

exact를 사용하면 / 와 정확히 일치할 때만 컴포넌트 컨텐츠를 보여주게 됩니다.