[React] React-Route-Dom

1.배경

매끈한 라우팅을 제공하는 기능을 한다.

터미널에 npm install react-router-dom 입력해준다.

 

 

 

2. BrowserRouter

import { BrowserRouter as Router } from "react-router-dom"

우선 위처럼 import를 해줘야한다.

BrowserRouter은 react-route-dom을 적용하고 싶은 컴포넌트의 최상위에 덮어주면 사용가능하게 해준다.

ReactDom.render(<BrowserRouter><App /></ BrowserRouter>, document.getElementById('root'));

 

 

 

3. Route

import { Route as Router } from "react-router-dom"

 

(1)

Url에 따라 달라지는 컴포넌트를 구현하려면, Route로 감싸준다. 

속성으로 path를 통해서 각각의 주소에따른 컴포넌트를 선택할 수 있다.

 

<Route path="/"><Home></Home></Route>
<Route path="/topics"><Topics></Topics></Route>
<Route path="/contact"><Contact></Contact></Route>

 

(2)exact

http://localhost:3000/topics로 들어올시

단 paht="/"도 발현하고 path="/topics"도 발현한다. 즉 2개가 둘다 발현하다.

 

그래서 이런 경우를 방지하기 위해서 exact속성을 이용해주면 정확하게 path가 일치할때만 발현이 가능하다.

<Route exact path="/"><Home></Home></Route>
<Route path="/topics"><Topics></Topics></Route>
<Route path="/contact"><Contact></Contact></Route>

 

 

 

4. Switch

import { Switch as Router } from "react-router-dom"

Switch는 가장 위에것이 발현될시 나머지는 발현시키지 않는다. 즉

<Switch>
<Route exact path="/"><Home></Home></Route>
<Route path="/topics"><Topics></Topics></Route>
<Route path="/contact"><Contact></Contact></Route>
</Switch>

위의 경우 path="/topics"나 path="/contact"로 들어가도 Home가 발현된다. 

 

(2)

<Switch>
<Route path="/topics"><Topics></Topics></Route>
<Route path="/contact"><Contact></Contact></Route>
<Route exact path="/"><Home></Home></Route>
</Switch>

이렇게 순서만 바꿔도 각각의 컴포넌트를 구현 할 수 있다. (중복 없이)

 

 

 

 

5. Link

import { Link } from "react-router-dom"

 

<a>태그와 마찬가지로 링크를 접속하게 해준다. 다만 <a>태그는 완전히 로딩되어서 <Link>가 도 우수하다.

<ul>

	<li><Link to="/">Home</Link></li>
    <li><Link to="/topics">Topics</Link></li>
    <li><Link to="/contact">Contact</Link></li>
    
</ul>

이런식으로 사용 가능하다.

 

6. HashRouter

기본적으로 BrowseRouter대신 사용가능하다. 이는 어떤 것을 발현해도 사용자에겐 같은 주소를 보여준다.

개발자에게만 각각의 주소를 표시한다.

 

 

 

 

7. NavLink

기본사용은 Link와 비슷하다.

사용자가  사용하는 link에 active라는 클래스를 만들어준다.

사용자가 어떤 컴포넌트를 사용하는 표시할때 용이하게 사용된다.