[react router]리액트 라우터

우선 create-react-app 을 하여 설치한 후

npm add react-router-dom 으로 리액트라우터를 설치한다.

 

src 디렉토리에 index.js에 

import { BrowserRouter } from "react-router-dom";

**브라우저라우터는 히스토리 api를 이용해서 실행된다.

를 임폴트 해준뒤

App 컴포넌트를 감싸준다.

 

이후 실습으로 Home.js 와 About.js 를 만들어 각각의 페이지를 구성해 준다.

App.js 로 가서 

import { Route } from "react-router-dom";
//임폴트 해줌



function App() {
  return (
    <div>
      <Route path="/" component={Home} /> 
      //path 는 주소를 나타내며, component는 그 주소에 보여질 컴포넌트를 의미한다
      <Route path="/about" component={About} />
    </div>
  );
}

위와같이하고 실행한 뒤 주소창에  /about 를 뒤에 붙이면

홈과 어바웃이 같이 나타나는 결과를 볼 수 있다.

이는 about도 비어있는 / 슬래쉬에도 속해있기 때문이다.

이때 exact 라는 값을 넣어주면 해결 할 수있다.

이 props 를 넣게되면 경로가 완전하게 일치할때만 보여주겠다는 뜻이 된다.

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

 

Link 컴포넌트 사용하기

누르면 특정 경로로 가고싶을때 사용하는 컴포넌트

**a 태그 사용금지,(페이지가 이동해버림)

 

import { Route, Link } from "react-router-dom";
//링크를 임폴트해주고

      <ul>
        <li><Link to="/">홈</Link></li>
        <li><Link to="/about">어바웃</Link></li>
      </ul>
      
      //이런식으로 해주면 링크가 만들어지고 누르면 바뀐다

이외에 해쉬라우터 메모리라우터도 존재한다.

 

 

벨로퍼트 님의 강좌

https://react.vlpt.us/