Router) 사용하기

전글을 보고 이제 해보자 해보자!!

npm i react-router-dom

터미널에서 이눔을 설치해준다.

 

전글에 이런글이 있었지

기억이 난다면 이놈을 호출해줄꺼야

 

index.js 에다가 <BorwserRouter> 감싸주고

import {BrowserRouter} from 'react-router-dom';
 
 
ReactDOM.render(
    <BrowserRouter>
     <App />
    </BrowserRouter>
, document.getElementById('root'));

import React from 'react'
 
function Home() {
    return (
        <div>
            <h1>라우터 체인지</h1>
            <p>이곳은 라우터 체인지된 HOME 입니다.</p>
        </div>
    )
}
 
export defaut Home;

Home() 을 export 해주는거 잊지 말라구~

 

import React from 'react'
function About() {
    return (
        <div>
            <h1>라우터 체인지</h1>
            <p>이곳은 라우터 체인지된 ABOUT 입니다.</p>
        </div>
    )
}
export defaut About;

이제 이 두 컴포넌트를 라우트 해볼것이다.

 

index.js 에서 BrowserRouter 감싸줬으니 App.jss에다가...

App.js로 가보자

import React from 'react';
import {Route} from 'react-router-dom';
import Home from './Home';
import About from './About';
 
function App() {
  return (
    <div>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  );
}
 
export default App;
 

이제 위에 {Route} 불러온 저 객체는 무엇이냐!!

--> 원하는 컴포넌트를 특정 주소에 보여주겠다!!!라는것

  <Route path="/" component={Home} />
<Route path="/about" component={About} />

path 경로가 / 일때 Home 컴포넌트 보여주고 /about 일때는 About 컴포넌트 보여준다는 말...

 

결과 봐봐봐!!

굿 이제 localhost:3000/about 으로 들어가보자

아니 왜 두 컴포넌트가 둘다보이냐.............

경로를 비교해서 해당 컴포넌트를 보여주는데

"/" 도 겹치고  "/about"이 겹친다.... 그럼 해결책은 뭐야....

 <Route path="/" component={Home} exact={true}/>

exact={true} 를 넣어주면 "/" 와 정확히 일치해야 보여주것다!! 라는것

->오류 해결~~~

 

<a href="/about">이동</a>

이렇게 a태그 쓰면 안되는거...이유 알지? 새로고침되구.. SPA 특징도 없어지구 새로고침이 되면 파일을 다시불러오게되....

크롬개발도구에 네트워크보면 흐름을 볼수있어 그런데 우리는 주소는 바뀌지만 SPA특징인 바뀌는 컴포넌트만 싹 바꾸고 안바뀌는건 그대로유지하고싶어 렌더링 불필요하게 다시하고싶지 않아....그래서 있는게 Link 태크야

 

import {Route, Link} from 'react-router-dom';

임포트 해주구!!

function App() {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to ="/about">소개</Link>
        </li>
      </ul>
      <Route path="/" component={Home} exact={true}/>
      <Route path="/about" component={About} />
    </div>
  );
}

요딴식으로 진행해볼께

이제 홈버튼을 눌르고 network를 봐볼께

소개로 Link를 타도 새로 받지 않고 그대로 있어.... 왜냐 바뀌는게 없으니까...글자하나밖에...ㅎㅎ

이런식으로 기본적으로 라우터가 작동하는거야 별거아냐? 응 벌거야 이제 뒤로가봐ㅎㅎ

 

전글에 사용한 Router종료 index.js에서 바꿔 사용해보는것도 좋아 ㅎㅎ

이제 기본 동작은 알게된거야