[React.js] Kossie Coder - 20강. react router 적용하기

1. react-router-dom 설치

// npm
npm install react-router-dom

// yarn
yarn add react-router-dom

// yarn version change
yarn add history@{이전 version} react-router-dom@{바꿀 version}

2. Navbar.js : react-router-dom의 Link 설정

...
import {Link} from 'react-router-dom';

...
			<Link className="navbar-brand" to="/">Home</Link>
...
						<Link className="nav-link" to="/movies">Movies</Link>
...
						<Link className="nav-link" to="/users">Users</Link>
...

3. App.js : react-router-dom의 Route, Switch 설정

...
import {
	BrowserRouter as Router,
	Route,
	Switch
} from 'react-router-dom';
...
	return (
		<Router>
			<div className="App">
				<Navbar/>
				{/* Switch : 위에서부터 하나씩 검사하여 내려와서 맞는 Route를 선택함. */}
				<Switch>
					{/* Route : 해당 path의 uri가 들어올 경우 태그 내의 요소를 화면에 출력 */}
					<Route path="/movies">
						<h1>Movie list</h1>
						<MovieForm addMovie={addMovie}/>
						{renderMovies}
					</Route>
					<Route path="/users">
						<h1>Users</h1>
					</Route>
					{/* exact : uri가 path와 정확히 일치할 경우에만 해당 태그 내의 요소를 화면에 출력 */}
					<Route path="/" exact>
						<h1>Home</h1>
					</Route>
				</Switch>
			</div>
		</Router>
	);
...

4. react-router-dom version 5와 6의 차이점

1. version 5의 Switch 태그가 version 6에서는 Routes로 변경됨.
2. Route 태그의 exact 옵션이 사라지고, 기본적으로 exact 옵션이 붙게됨. 이어서 uri를 매칭하고 싶다면 path의 뒤에 “/*”을 붙여서 표현함.