Router

리액트에서 라우터란

SPA의 라우팅 문제를 해결하기 위해서 표준 처럼 사용 되고있는
네비게이션 라이브러리이다.

npm install react-router-dom

React Router의 핵심 컴포넌트

Link, Route, Router(BrowserRouter), Switch

BrowserRouter history api를 사용해 url과 ui를 동기화 하는 라우터이

Switch 자식 컴포넌트 Route또는 Redirect 중 매치되는 첫 번째 요소를 렌더링 한다.

Switch를 사용하면 BrowserRouter만 사용할 때와 다르게 하나의 매칭되는 요소만 렌더링 한다는 점을 보장해줍니다. 사용하지 않을 경우 매칭되는 모두를 렌더링합니다.

<Link to="/about">About<Link>

위와 같이 사용하며 html a태그와 비슷한 기능을 하는 컴포넌트이다.

<Route path="/about" componet {about} />

현재 주소창의 경로와 같을 경우 해당 컴포넌트를 보여준다

<Router>
  ...
  <Link />
  <Link />
  ...
  <Router />
  <Router />
  ...
</Router>

Route와 Link 컴포넌트의 DOM 트리상 상위 컴포넌트이다

기본적인 형식은 위와 같다.

import React from "react"
import { Link, Route, BrowserRouter as Router } from "react-router-dom"
import Home from "./Home"
import About from "./About"
import NotFound from "./NotFound"

function App() {
  return (
    <Router>
      
        <Link to="/">
          <button>Home</button>
        </Link>
        <Link to="/about">
          <button>About</button>
        </Link>
        <Link to="/users">
          <button>Users</button>
        </Link>
     
		<Switch>      
			<Route exact path="/" component={Home} />
			<Route path="/about" component={About} />
			<Route path="/users" component={NotFound} />
      		//path="*" 홈과 어바웃을 제외한 다른 페이지에 접속할 경우
		</Switch>
		
    </Router>
  )
}

Route props

match, location, history

컴포넌트간에 props 넘겨주기.

후에 Next Router 포스팅하기