리액트에서 라우팅 처리

 

리액트 라우터 설치 & 적용

- 리액트에서 라우팅을 처리하기 위해 라우터를 설치해주자

리액트 라우터 설치 & 적용

리액트 페이지 전환 기능 만들기

 

1. index.js에 Browser Router 적용하기

import {BrowserRouter} from "react-router-dom"

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

 

2. 세부화면 만들기 ( Home / Dog / Cat)

import React from "react";

const Home = (props) => {

    return (
        <div>메인 화면이에요.</div>
    )
}

export default Home;

import React from "react";

const Dog = (props) => {

    return (
        <div>강아지 화면이에요.</div>
    )
}

export default Dog;

import React from "react";

const Cat = (props) => {

    return (
        <div>고양이 화면이에요.</div>
    )
}

export default Cat;

 

3. App.js에서 Route 적용하기

• Route 사용방법 1 - 넘겨줄 props가 없을 때

Route path="주소[/home 처럼 /와 주소를 적어요]" component={[보여줄 컴포넌트]}/>

• Route 사용방법 2 - 넘겨줄 props가 있을 때

   - 버킷리스트 앱은 App.js에서 list를 props로 넘겨준다. 이럴 때 쓰는것

<Route path="주소[/home 처럼 /와 주소를 적어요]" render={(props) => (<BucketList list={this.state.list} />)} />

 

• App.js에 적용해보자

import React from 'react';
import logo from './logo.svg';
import './App.css';
// Route를 먼저 불러와줍니다.
import { Route } from "react-router-dom";

// 세부 페이지가 되어줄 컴포넌트들도 불러와주고요!
import Home from "./Home";
import Cat from "./Cat";
import Dog from "./Dog";

class App extends React.Component {

  constructor(props){
    super(props);
    this.state={};
  }
  
  render(){
    return (
      <div className="App">
        {/* 실제로 연결해볼까요! */}
        <Route path="/" component={Home} />
        <Route path="/cat" component={Cat} />
        <Route path="/dog" component={Dog} />
      </div>
    );
  }
}

export default App;

- localhost:3000/cat 을 입력하면 위와 같이 표현된다.

- 이는 / + cat 이라 /인 화면과 /cat 인 화면이 모두 표시되었기 때문이다.

- exact를 사용하자

  <Route path="/" exact component={Home} />

 

- 정상적으로 표시됨을 알 수 있다.

 

4. URL 파라미터 사용하기

- 웹사이트 주소의 파라미터를 사용

 

App.js

<Route path="/cat/:cat_name" component={Cat}/>

Cat.js

const Cat = (props) => {
    console.log(props.match);

- 콘솔을 통해 어떠한 방식으로 오는지 확인하자

- params에서 이름정보를 가져올 수 있다.

return (
        <div>고양이 이름은 {props.match.params.cat_name} 이에요.</div>
    )

 

Cat.js 코드

import React from "react";

const Cat = (props) => {
    console.log(props.match);
    return (
        <div>고양이 이름은 {props.match.params.cat_name} 이에요.</div>
    )
}

export default Cat;

 

5. Link 사용하기

(1) App.js 에서 Link 추가 import

(2) Link 태그 사용

       <div>
          <Link to="/">Home으로 가기</Link>
          <Link to="/cat/nabi">Cat으로 가기</Link>
          <Link to="/dog">Dog으로 가기</Link>
        </div>

 

6. History 사용하기

- Link 컴포넌트를 클릭하지 않고, 함수를 사용한 페이지 전환이다.

- 먼저, App.js의 componentDidMount()에서 props를 콘솔로 확인해보자.

 componentDidMount(){
    console.log(this.props);
  }

- 위의 코드를 실행한다면 아무 props도 찍히지 않는다.

- 이는 history 객체를 props로 받아오려면, withRouter을 설정해주어야 한다.

 

withRouter

import { withRouter } from "react-router";

export default withRouter(App);

 

결과

 

버튼생성

  <button onClick={() => {
          // props에 있는 history를 사용합니다.
          // push([이동할 주소])는 페이지를 이동시켜 줍니다.
          this.props.history.push('/cat');
        }}>
          /cat으로 가기
        </button>
        <button onClick={()=>{
          // goBack()은 뒤로가기 예요.
          this.props.history.goBack();
        }}>뒤로가기
        </button>

 

결과

 

Plus

- Routing으로 변경될 부분만 Route 처리를 하고, 바뀌지 않을 부분은 따로 처리해야 원하는 모습이 된다.