리액트 라우터 적용하기

![https://velog.velcdn.com/images%2Fbitalkil%2Fpost%2F9768c16a-0a4b-4869-b62f-7b4c080880aa%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-06-01%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.01.39.png%5D(https%3A%2F%2Fimages.velog.io%2Fimages%2Fbitalkil%2Fpost%2F9768c16a-0a4b-4869-b62f-7b4c080880aa%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-06-01%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.01.39.png)

위와 같은 구조의 포트폴리오 사이트를 리액트 네이티브 SPA로 구현 중이다. 리액트 라우팅에 대해 학습한 내용을 정리해본다.

// App.js
import React from 'react';
import './App.css';
import Nav from './Nav';
import AboutMe from './AboutMe';
import MyWork from './MyWork';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
        <Nav />
        <Switch>
          <Route path="/" exact component={Home} /> 
          <Route path="/aboutme" component={AboutMe} />
          <Route path="/mywork" component={MyWork} />
        </Switch>
      </div>
    </Router>
  );
}

const Home = () => (
  <div>
    <h1>Home Page</h1>
  </div>
)

export default App;

• BrowserRouter as Router 는 코드에서 Router를 식별자로 사용하겠다는 의미이다.
• Switch는 URL 매칭이 일어나면 그 경로에서 렌더링을 멈춘다. (하나의 컴포넌트만 렌더링 되도록)
• path="/"에 대해 exact를 사용하지 않으면 /로 시작하는 다른 경로도 포함하게 된다.

// Nav.js
import React from 'react';
import { Link } from 'react-router-dom'

function Nav() {

  const navStyle = {
    textDecoration: 'none',
    color: 'black'
  }

  return (
    <nav>
      <Link style={navStyle} to='/aboutme'>
        <h3>About Me</h3>
      </Link>
      <Link style={navStyle} to='/mywork'>
        <h3>My Work</h3>
      </Link>
    </nav>
  );
}

export default Nav;

• <nav></nav> 태그 안에서 링크의 집합을 정의할 수 있다.
• <Link to='/pathname'> 로 링크 경로를 설정한다.

작업 후 화면에 이렇게 출력된다.

![https://velog.velcdn.com/images%2Fbitalkil%2Fpost%2Fd418bc1b-947e-4487-8916-d4ae7beebe04%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-06-01%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.18.18.png%5D(https%3A%2F%2Fimages.velog.io%2Fimages%2Fbitalkil%2Fpost%2Fd418bc1b-947e-4487-8916-d4ae7beebe04%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-06-01%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.18.18.png)

.App {
  text-align: center;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 10vh;
  background-color: #FFE5CD;
}

🔗 [React Router Tutorial | React For Beginners]