라우팅

리액트 라우팅

대표적인 라우팅 패키지 설치

npm i react-router-dom

코드 작성

import { BrowserRouter, Route } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Home';
import Profile from './pages/Profile';

function App() {
  return (
    <BrowserRouter>
      <Route path="/" component={Home} />
      <Route path="/profile" component={Profile} />
      <Route path="/about" component={About} />
    </BrowserRouter>
  );
}

export default App;

• Route 컴포넌트에 Path와 Component를 설정하여 나열
• BrowserRouter 로 Route들을 감싸줌
• 브라우저에서 요청한 경로에 Router의 path가 들어있으면 해당 component를 보여준다.

 

문제

결과를 보면 home과 profile // home 과 about둘다 나온다

/profile을 보면 /와 profile 둘다 들어있기 떄문

해결

exact를 추가해주기

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

 

Dynamic Routing 1

~~~/profile/1로 들어왔을 때 어떻게 처리할 것인가?

<Route path="/profile/:id" exact component={Profile} />

이렇게 추가 :id

해당 컴포넌트에서 props로 받음

props는 route컴포넌트를 통해 history/ location/match 이렇게 받는다.

props.match.params.id; 에 id값을 준다.

export default function Profile(props){
    console.log(props);
    const id = props.match.params.id;
    return (
    <div>
        <h2>Profile 페이지</h2>
        {id && <p>id는 {id} 입니다.</p>}
        </div>
    );
}

Dynamic Routing 2

~~~/about?name=mark 로 접근

라우팅을 받은 props

props.location.search를 보면 ?name=mark 로 되어있음 key/value형식

가져다가 꺼내서 사용하자

qeury-string 으로 파싱하기 (패키지 설치)

 

switch와 Not Found

• 여러 Router중 순서대로 먼저 맞는 하나만 보여줌
• exact를 뺄수 있는 로직을 만들 수 있음
• 가장 마지막에 어디 path에도 맞지 않으면 보여지는 컴포넌트를 설정해서 "Not Found 페이지를 만들 수 있음"

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Home';
import Profile from './pages/Profile';
import NotFound from './pages/NotFound';

function App() {
  return (
    <BrowserRouter>
     <Switch>
        <Route path="/profile/:id" component={Profile} />
        <Route path="/profile"  component={Profile} />
        <Route path="/about"  component={About} />
        <Route path="/"  component={Home} />
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

위에서부터 순서대로 처리된다.

NotFound 컴포넌트 추가해서 암것도 없을 때 NotFound로 가게한다.

 

링크로 라우팅 이동하기 1

a태그를 사용하면 ? > 다시 서버에서 데이터를 받아오게된다.

   <BrowserRouter>
    <a href = "/">Home</a> 
     <Switch>
        <Route path="/profile/:id" component={Profile} />
        <Route path="/profile"  component={Profile} />
        <Route path="/about"  component={About} />
        <Route path="/"  component={Home} />
      </Switch>
    </BrowserRouter>

Link로 수정

가지고있는 리액트 뷰 중에서 페지이 제공한다.

 <Link to = "/">Home</Link>

import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Home';
import Profile from './pages/Profile';
import Links from './components/Links';
function App() {
  return (
    <BrowserRouter>
    <Links />
     <Switch>
        <Route path="/profile/:id" component={Profile} />
        <Route path="/profile"  component={Profile} />
        <Route path="/about"  component={About} />
        <Route path="/"  component={Home} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

import { Link } from "react-router-dom";

export default function Links() {
    return (
        <ul>
            <li>
                <Link to="/">Home</Link>
            </li>
            <li>
                <Link to="/profile">Profile</Link>
            </li>
            <li>
                <Link to="/profile">Profile/1</Link>
            </li>
            <li>
                <Link to="/about">About</Link>
            </li>
            <li>
                <Link to="/about?name=mark">About?name=mark</Link>
            </li>

        </ul>
    );
}

 

링크로 라우팅 이동하기 2

NavLink

activeClassName, activeStyle 처럼 active 상태에 대한 스타일 지정이 가능

Route Path처럼 동작하기 때문에 exact가 있음

isActive

커스텀하게 사용할 수 있음

isActive={(match, location) => {
 //match, location 인자를 받음     

 }

예시

<li>
    <NavLink to="/about" activeStyle={activeStyle}
        isActive={(match, location) => {
            console.log(location);
            return match != null && location.search === '';
        }}>About</NavLink>
</li>
<li>
    <NavLink to="/about?name=mark" activeStyle={activeStyle}
        isActive={(match, location) => {
            console.log(match);
            return match != null && location.search === '?name=mark'
        }}>About?name=mark</NavLink>
</li>

 

JS로 라우팅 이용하기

location.href로하면 서버에서 가져오는것 이기 떄문에 client에서 수정되는것이 아님

history 객체 이용하기

export default function Login(props){
    console.log(props);

    function login(){
        setTimeout(() => {
            //페이지 이동 
            props.history.push('/');
            //history 객체를 이용해 push 
            //새로운 경로가 추가 /으로 간다<div className=""></div>
        }, 1000);
    }
    return (
        <div>
            <h2>login 페이지</h2>
            <button onClick={login}>로그인하기</button>
        </div>
    )
}

다양한 props 의 객체 push, replace등등 이 있음

 

규모가 커지면 하위에 섹션 패널등등이 있음 .. 이럴떄 어떻게 사용하지?

 

1. HOC 컴포넌트 이용 

하위에서 props를 받아서 쓰는데

react-router-dom에서 사용하는 hoc인 withRouter를 사용한다.

//하위 페이지
import { withRouter } from 'react-router-dom';

export default withRouter(function LoginButton(props){
    console.log(props);
    function login(){
        setTimeout(() => {
            //로그인 버튼 밖에서 안으로 기능을 넣어주려면
            props.history.push('/');
        }, 1000);
    }
    return <button onClick={login}>로그인하기</button>
})

//상위 페이지
import LoginButton from '../components/LoginButton';

export default function Login(props){
    return (
        <div>
            <h2>login 페이지</h2>
            <LoginButton/>
        </div>
    )
}

2. Hook사용 

 

Redirect

<Route path="/login" render={()=> (isLogin ? <Redirect to ="/" /> : <Login />)} />