Router ?

---

사용자가 원하는 컴포넌트를 url에 맞게 화면에 출력할 수 있도록 돕는 기능

1. react-router-dom 다운로드

   npx install react-router-dom

2. BrowseRouter,Route 임포트

• 컴포넌트별 url 지정
• 1) 컴포넌트 사용처에서 해당 컴포넌트를 로 감싼다.
  2) 최상위 컴포넌트를 로 감싼다.

---

import {ReactRouter,Router} from react-router-dom
...
  	function Home(){
  		return(
 			<div>
              <h3>Home</h3>
              Home
  			</div>
  		);
  	}
  	function Topics(){
  		return(
 			<div>
              <h3>Topics</h3>
              Topics
  			</div>
  		);
  	}
  	function Contact(){
  		return(
 			<div>
              <h3>Contact</h3>
              Contact
  			</div>
  		);
  	}
	function App () {
  		return (
  			<div>
              <h1>React Router DOM Application</h1>
              <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/">Topics</Link></li>
                <li><Link to="/">Contact</Link></li>
              </ul>
              <Route exact url="/"><Home/></Route>
              <Route url="/topics"><Topics/></Route>
              <Route url="/contact"><Contact/></Route>
  			</div>
  		);
  	}
  ReactDom.render(<BrowseRouter><App/></BrowseRouter>,document.getElementById('root'));
 

※ <Link> 컴포넌트

• 화면 변경 후 페이지가 리로딩되지 않도록 하는 방법
• <a href="path"> 대신 <Link to="path">를 사용한다.
• <Route>와 같이 exact 속성 추가 가능
• NavLink를 사용하면 활성화된 NavLink에 자동적으로 active 클래스가 추가된다. (활성화된 link를 직관적으로 알고 조작할 수 있다.)

※ 여러 path에 해당하는 컴포넌트를 특정 path에만 걸리도록 하는 방법
1. <Route>에 exact 속성 추가(해당 url와 정확히 일치하는 경우에만 화면에 표시)
2. <Route>들을 <Switch> 컴포넌트로 감싸기