[React] Route 사용하기 Url Parameter parsing, class 에사 사용하기

React Route
get Parameters
url query string

 

기존에 react app 이 없으면 여기서 하나 생성 해보세요.
2020/01/17 - [React,Node,js] - React + express 연동설정. 처음부터 따라하기

 

일반적으로 create-react-app 을 하면

index.js 안에 아래와 같이 App.js 를 가져옵니다.

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

 

여기서 Router 를 하나 생성 해보죠.

index.js 에서 위 코드를 아래와 같이 바꿀겁니다.

import Root from './Root';

ReactDOM.render(<Root />, document.getElementById('root'));

 

그럼 src 폴더 아래에 Root 는 export 한게 있어야 겠죠.

파일을 하나 생성합니다.

Root.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import App from './App';

class Root extends Component {
    render() {
        return (
            <Router>
                <Route exact path="/" component={App} />
                <Switch>
                    <Route path="/search/:search" component={App} />
                    <!-- <Route path="/Logs" component={Logs} /> -->
                    <!-- 다른 route 들 여기에 -->
                </Switch>
            </Router>
        );
    }
}

export default Root;

여기서 import 하는 . 요거 설치합니다.

$ yarn add global react-router-dom

 

• localhost/   --> App 으로 감
• localhost/search/개발인생   --> App 에서 this.props.match.params.search 로 사용. 값은 "개발인생" 
• 주석쳤지만 localhost/Logs   --> Logs 로 감.

<Route path="/search/:name" component={App} /> 이라고 쓰면
App 에서 this.props.match.params.name 으로 사용합니다.

 

 

 

아래는 참고용. Router / Switch 간단 설명

/*
    일반적으로 설명에 많이 나오는 route 는 아래와 같습니다.
    http://localhost/ 는 Home 으로 가고
    http://localhost/about/bryan  은 About 으로 가는데 파라메터가 있고
    http://localhost/about 은 그냥 About 으로 갑니다.
    
    exact 라는 키워드가 없으면 localhost/about  으로 갈때도 home 이 나옵니다.
    / 경로가 /about 에 포함되어있기 때문입니다. 
    
    그리고 Switch 안에서 /about/:name 이 /about 보다 위에 있어야 합니다.
    /about 이 위에 있다면 http://localhost/about/bryan 으로 왔을 때 
    항상 /about 를 먼저 찾게됩니다. 
*/
            <div>
                <Route exact path="/" component={Home}/>
                <Switch>
                    <Route path="/about/:name" component={About}/>
                    <Route path="/about" component={About}/>
                </Switch>
            </div>