React-router: 설치부터 Routing까지

1. 터미널에서 client 디렉토리로 이동 후 react-router-dom 설치

npm install react-router-dom –save

2. Routing 파일 내에 react-router-dom과 routing 할 component import

import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

import page1 from './components/views/page1/page1'
import page2 from './components/views/page2/page2'

3. 함수에서 Router를 return

function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={page1} />
          <Route exact path="/page2" component={page2} />
        </Switch>
      </div>
    </Router>
  );
}

4. 복습 겸 이해를 돕기 위한 App.js (Routing) 전체 코드

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

import page1 from './components/views/page1/page1'
import page2 from './components/views/page2/page2'

function App() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={page1} />
          <Route exact path="/page2" component={page2} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;