13 리액트라우터로 SPA 개발하기

1.$ yarn create react-app router-tutorial

$ cd router-tutorial

$ yarn add react-router-dom

2.프로젝트에 라우터적용

BrowserRouter 컴포넌트를 감싸면 HTML5의 History ApI를 사용ㅎ아ㅕ 페이지를 새로고침하지 않고도 주소변경, 주소 관련 정보를 props로 조회 및 사용 할수 있다

//src/index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

3.<Route path="주소규칙"component={보여줄컴퍼넌트}/>

각 컴퍼넌트 사용할경우 exact 사용

*** route와 link 차이

<Link>

 HTML의 <a> 태그와 유사한 기능을 한다.

· to : <a> 태그의 href 와 같은 기능, 이동할 경로를 지정

 

<Route>

 현재 주소창의 경로와 매치될 경우 보여줄 컴포넌트를 지정한다.

· path : 매치시킬 경로를 지정

· component : 매치되었을 때 보여줄 컴포넌트 할당

 

<Router>

 <Route>와 <Link> 컴포넌트가 함께 유기적으로 동작하도록 묶어주는데 사용한다. <Route>와 <Link> 컴포넌트는 DOM 트리 상에서 항상 <Router>를 공통 상위 컴포넌트로 가져야 한다.

***

//App.js에서 Route 하나에 path여러개 설정하기

import React from "react";
import { Route, Link } from "react-router-dom";
import About from "./About";
import Home from "./Home";

function App() {
  return (
    <div className="App">
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/About">소개</Link>
        </li>
        <li>
          <Link to="/Info">info</Link>
        </li>
      </ul>

      <Route path="/" component={Home} exact={true} />
      <Route path={["/about", "/info"]} component={About} />
    </div>
  );
}