[react] react router 사이트 이용 방법

https://reactrouter.com/

Declarative routing for React apps at any scale | React Router

 

React에서 페이지 전환 기능을 구현하기 위해서는 외부 라이브러리에 의존해야 한다.

페이지 전환을 위해 주로 react-router를 이용한다.

 

 

Start the Tutorial 참고하기

 

설치 방법 (v6버전)

- 터미널을 통해 설치한다.

npm i react-router-dom

 

 

이용 방법

1. jsx파일에 import 하기

 

import {Link,NavLink} from 'react-router-dom';/* Link: Link (지정)을 불러와서 페이지전체가 아닌 일부만 교체될수있도록 설정/a href는 전체교체되면서 새로고침돼서 x, 이걸 사용/사용 페이지마다 */
/* NavLink 로 설정하면 a class안에 active가 생겨서 내가 css에서 설정해서 스타일 바꾸는거 가능 (header.css 참고)*/
/* Link or NavLink 골라서 사용 */

/*한개씩 각자 사용 가능*/
import {Link} from 'react-router-dom';
import {NavLink} from 'react-router-dom';

 

2. 컴포넌트 생성하기

 

▼ <NavLink></NavLink>로 생성한 경우

 

 <ul>
   {
   navList.map((element,index)=>{
     return(
      <li key={index}>
        <NavLink to={element.href} className={({isActive})=>isActive?'navList on':'navlist'}>
            {element.content}
        </NavLink>
        /* {isActive} :NavLink의 지정된객체,
        active가 있으면 on(원래더해지는 active클래스대신 내가 설정한 on클래스적용)
        ->특별한 일아니면 그냥 active사용하면됨*/
      </li>
     )
    })
    }
 </ul>

 {/* <li key={index}><Link to={element.href}>{element.content}</Link></li> */}

 

3.  link 설정하기 (누르면 이동할 href 설정하기)

 

react-router에서 페이지 이동을 위한 링크 <a/> 태그 대신, react-router가 제공하는 <Link/> 컴포넌트를 사용해야 한다.

Link 컴포넌트는 to라는 Props를 가지고 있다. (Props에 이동하고자 하는 URL을 추가)

 

 1) 컴포넌트로 링크 설정하기

1. props로 link 불러오기
 <NavLink to={element.href}></Nav>
 /*{element.href} : 임의 설정*/

2. 또 다른 예시 ) 폴더경로 link 불러오기
<Link to="/text/1"> text 1</Link>

 

▼ 위의 props사용한 예제에서 변수 navList에 배열을 이용해 이동될 href를 각각 설정해주었다.

     (간단하게 코드 표현하기 위해)

 const navList=[
        {content:'Main',href:'/'},
        {content:'CardList',href:'cardList'},
        {content:'Notice',href:'notice'},
        {content:'Event',href:'event'},
    ]

 

 

▼ 전체 코드 참고

 

import React from 'react';
import {Link,NavLink} from 'react-router-dom';/* Link: Link (지정)을 불러와서 페이지전체가 아닌 일부만 교체될수있도록 설정/a href는 전체교체되면서 새로고침돼서 x, 이걸 사용/사용 페이지마다 */
/* NavLink 로 설정하면 a class안에 active가 생겨서 내가 css에서 설정해서 스타일 바꾸는거 가능 (header.css 참고)*/
/* Link or NavLink 골라서 사용 */

const Nav = () => {
    const navList=[
        {content:'Main',href:'/'},
        {content:'CardList',href:'cardList'},
        {content:'Notice',href:'notice'},
        {content:'Event',href:'event'},
    ]
    return (
        <div id='nav'>
            <h2 className='blind'>메인메뉴</h2>
            <ul>
                {
                navList.map((element,index)=>{
                    return(
                        <li key={index}><NavLink to={element.href} className={({isActive})=>isActive?'navList on':'navlist'}>{element.content}</NavLink></li>
                        /* {isActive} :NavLink의 지정된객체 (props로 내려주기때문에 중괄호사용?),active가 있으면 on(원래더해지는 active클래스대신 내가 설정한 on클래스적용)->특별한 일아니면 그냥 active사용하면됨*/
                    )
                    {/* <li key={index}><Link to={element.href}>{element.content}</Link></li> */}
                })
                }
            </ul>
        </div>
    );
};

export default Nav;

 

4. App.js 에 태그 추가하기

기본구성)

 <div className="App">
      <BrowserRouter> ★
      <Routes> <=페이지 전환시키려는 곳을 감싸기 ★
        {/* element : 어떤 컴포넌트를 보여줄건지 */ }
        <Route path="/" />   ★ // element={<CardList/>}/는 내가 설정한 변수
      </Routes> ★
      </BrowserRouter> ★
   </div>

import './App.css';
import Header from './components/Header';
import Main from './components/Main';
import Footer from './components/Footer';
import CardList from './components/CardList';
import Notice from './components/Notice';
import Event from './components/Event';
import {Routes, Route, BrowserRouter} from 'react-router-dom';
import {Manual,Rule, EtcInfo, Policy} from './pages/FooterMenu'

/* Routes */

function App() {
  
  const title = 'site';
  return (
    <div className="App">
      <BrowserRouter>
      <Header title={title} />
      <Routes>
        <Route path="/" element={<Main/>}/>
        {/* element : 어떤 컴포넌트를 보여줄건지 */ }
        <Route path="/cardList" element={<CardList/>}/>
        <Route path="/notice" element={<Notice/>} />
        <Route path="/manual" element={<Manual/>} />
        <Route path="/rule" element={<Rule/>} />
        <Route path="/policy" element={<Policy/>} />
        <Route path="/etcInfo" element={<EtcInfo/>} />
        <Route path="/event" element={<Event/>} />
        {/* path="/policy":(/policy 임의), 경로는 거의 소문자로 시작함 */}
      </Routes>
      <Footer title={title} />
      </BrowserRouter>
    </div>
  );
}

export default App;