[react] Routing

작성일자 : 2020.01.26

환경 : npm 6.12.0, react-router-dom 5.1.2, 

목표 : 특정 링크를 클릭하여 경로를 이동하며, 경로 이동 시 특정 위치에 보여지는 Component의 변환

 

 

1. react router 설치

 

# create-react-app 기본 프로젝트 사용 > npm install react-router-dom

 

 

2. Routing Component

 

Rounting에 사용할 단순 문구를 출력하는 Component 생성

 

Hello.js

import React, { Component } from 'react';

class Hello extends Component {
    render(){
        return (
            <div>
                Hello
            </div>
        )
    } 
}

export default Hello;

 

Home.js

import React, { Component } from 'react';

class Home extends Component {
    render() {
        return (
            <div>
                Home
            </div>
        )
    }
}

export default Home;

 

 

3. Router 설정

 

import React, { Component } from 'react';

import Hello from './component/Hello'
import Home from './component/Home'

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

class App extends Component {
  render() {
    return (
      <div>
      
        <Router>
          <Link to="/"> default </Link> 
          <Link to="/hello"> hello </Link>
          <Route exact path="/" component={Home}/>
          <Route path="/hello" component={Hello}/>
        </Router>
        
      </div>
    )
  }
}

export default App;

 

<Link to="path">"DisplayWord"</Link>

 

-  "DisplayWord" 가 Router Component 위치에 보여지며, 해당 문구를 클릭 시 해당 path로 이동

 

 

<Route exact path="path" component={"ComponentName"}>

 

-  path로 접근할 경우 해당 위치에 ComponentName의 Component가 보여짐

-  exact : Default Matching 규칙

 

 

4. 확인

 

4.1 '/' 경로 접근시 or default 문구 클릭 시 

 

4.2 /hello 경로 접근 시 or hello 문구 클릭 시