ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • react router
    개발/react 2020. 12. 17. 19:52

    react 에서는 react-router-dom 라이브러리를 통해  들어 오는 주소 별로 별도의 페이지를 보여줄 수 있는 라우팅 기능을 제공한다. 리액트의 특성에 맞게 이 라이브러리는 어떤 페이지로 진입 했을 때 어떤 페이지를 보여 줄 것인지를 컴포넌트 단위로 뽑을 수 있다.

     

    1. 라이브러리 임포트 

     

    리액트와 필요한 라이브러리를 임포트 한다.

     

    import React from 'react';
    import { BrowserRouter, Route, Switch, Link, NavLink } from 'react-router-dom';

     

    2. Route

     

    const AppRouterExample = () => (
        <BrowserRouter>
            <div>
                <Switch>
                    <Route path="/" component={() => (<h2>This is DashboardPage</h2>)} exact={true} />
                    <Route path="/create" component={() => (<h2>This is Create Page</h2>)} exact={false} />
                    <Route path="/edit/:id" 
                        component={ (props) => (<h2>This is Edit Page {props.match.params.id}</h2>)} 
                            exact={true} />
                    <Route path="/help" 
                        component={() => (<h2>This is help page</h2>)} 
                        exact={true} />
                    <Route component={() => (<h2>This is not 404 page</h2>)} />
                </Switch>
            </div>
        </BrowserRouter>
    );

     

    <BrowserRouter> 와 <Switch> 태그 내에 위치한 <Route> 태그로 관리하고 싶은 경로를 설정할 수 있다. 이렇게 두면 애플리케이션이 관리하는 경로를 설정 할 수 있게 된다.

     

    2.1 path 

     

    라우팅할 경로를 정의하는 값이다. 위 페이지에서는 /create, /edit, /help 페이지를 경로로 뒀다. edit 페이지의 경우에는 수정하려는 데이터의 id를 인자로 받을 수 있고 이 값은 component에 전달된다. component 객체에 props로 전달되며 저장되는 필드는 컴포넌트에 있는 값과 같다.

     

    2.2 component 

     

    해당 경로로 들어올 경우 어떤 component를 보여줄 것인지를 결정하는 곳이다. 직접 컴포넌트를 만들어서 넣을 수 있으며 이 예제에서는 component 필드 내에서 보여줄 수 있는 값을 넣었다. /edit 경로를 보면 props로 Route로부터 인자를 받아오는데 /edit에서 받아오는 id 정보를 확인 할 수 있다.

     

    2.3 exact 

     

    exact는 이 경로를 명확하게 볼 것인지 말것인지를 설정한다. 평소 익히 쓰던 path와 다른 개념이라 와닿지 않을 것 같은데 exact값이 false면 앞에 부분만 맞아도 해당 페이지로 렌딩이 된다. 예로 /create 는 exact 값이 false이기 때문에 /create/34 로 접근하든, /create/edit 으로 접근하든 모두 create 페이지로 렌딩해준다.

     

    3. NavLink 

     

    const AppRouterExample = () => (
        <BrowserRouter>
            <div>
                <div>
                    <h1>This is Header</h1>
                    <NavLink to="/" activeClassName="is-active" exact={true}>Dashboard</NavLink>
                    <NavLink to="/create" activeClassName="is-active">Create Expense</NavLink>
                    <NavLink to="/edit" activeClassName="is-active">Edit Expense</NavLink>
                    <NavLink to="/help" activeClassName="is-active">Help</NavLink>
                </div>

     

    NavLink는 하이퍼링크 기능이고 스타일링을 가능하게 한다. 내부에 있는 필드 값을 바꿔서 더 링크를 더 이쁘게 만들 수 있다.

    '개발 > react' 카테고리의 다른 글

    useState  (0) 2020.12.21
    connect  (0) 2020.12.20
    redux  (0) 2020.12.16
    scss  (0) 2020.12.13
    webpack  (0) 2020.12.13

    댓글

Designed by Tistory.