라우터에는 BrowserRouter 가 보통 많이 사용되며
Link 와 Route 를 통해서 라우팅을 구현하는 방식이다
작업하고 있는 전체 코드를 살펴보자
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from 'react-router-dom';
import './App.css';
import BlogForm from './components/BlogForm';
function App() {
return (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/blog">Blog</Link>
</nav>
<Route path="/">Home Page</Route>
<Route path="/blog"><BlogForm /></Route>
</Router>
);
}
두개의 컴포넌트가 있고 위와 같이 path와 Link 속성을 통해
각각의 컴포넌트가 렌더링 되는 URL이 정해진다
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/blog">Blog</Link>
</nav>
<Route path="/">Home Page</Route>
<Route path="/blog"><BlogForm /></Route>
</Router>
홈페이지에 들어갔을 때 /blog 도 /로 매칭되기 때문에
2개의 컴포넌트가 모두 렌더링 된다는 것
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/blog">Blog</Link>
</nav>
<Route exact path="/">Home Page</Route>
<Route path="/blog"><BlogForm /></Route>
</Router>
이와 같은 문제점을 해결하기 위해선 path 앞에 exact를 사용하여
정확히 일치하는, 즉 부분적으로 일치하는 것이 아니라 정확하게
일치하는 URL의 컴포넌트를 렌더링시키는 방법을 사용할 수 있다
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/blog">Blog</Link>
</nav>
<Route exact path="/">Home Page</Route>
<Route path="/blog"><BlogForm /></Route
<Route component={Page404} />
</Router>
에러가 발생했을 때 Page404 컴포넌트를 보여주고 싶은데
실제로 실행시 에러가 발생하지 않음에도 불구하고 해당 컴포넌트가
어떠한 URL에도 렌더링 된다는 것을 알 수 있다
이유는 리액트의 라우터가 path를 매칭시킬 때 값이 없기 때문에
무조건적으로 렌더링을 시켜버리는 것이다
<Router>
<Switch>
<nav>
<Link to="/">Home</Link>
<Link to="/blog">Blog</Link>
</nav>
<Route exact path="/">Home Page</Route>
<Route path="/blog"><BlogForm /></Route>
<Route component={Page404} />
</Switch>
</Router>
따라서 이 문제를 해결하기 위해 Switch가 등장한다
Switch는 첫번째로 매칭되는 path를 가진 컴포넌트를 렌더링 시킨다
exact path와 다른점은 첫번째 매칭만 본다는 것