React Router (Feat.생활코딩)

1. exact

1.1 exact를 사용하는 이유는 ?

function Home() {
  return <div>Home</div>;
}

function Topics() {
  return <div>Topics</div>;
}

function Contact() {
  return <div>contact</div>;
}

function App() {
  return (
    <div>
      <div>
        <Link to="/">go Home</Link>
        <Link to="/topics">go Topics</Link>
        <Link to="/contact">go contact</Link>
      </div>
      <div>
        <Route path="/">
          <Home></Home>
        </Route>
        <Route path="/topics">
          <Topics></Topics>
        </Route>
        <Route path="/contact">
          <Contact></Contact>
        </Route>
      </div>
    </div>
  );
}

export default App;

라고 할때 topics 컴포넌트로 이동할때도 Home 컴포넌트가 나오게 된다. 그 이유는 /topics의 경로가 / 규칙과도 일치하기 때문에 발생하는 현상이다. 이 문제를 해결하기 위해서 exact를 사용한다.

2. Switch