천천히 알아보는 코딩공부

[react] react-router-dom v6 으로 navigate 만들어보기 본문

React

[react] react-router-dom v6 으로 navigate 만들어보기

고기고기물고기 2022. 7. 25. 13:00

1.  해당 프로젝트에 react-router-dom 사용 환경 준비

yarn을 통해 설치

yarn add react-router-dom

npm을 통해 설치

npm install react-router-dom

 

BrowserRouter : React 웹 애플리케이션 개발 시 클라이언트 사이드 라우팅을 위해 라우팅 관련 컴포넌트들의 최상단에 위치시켜야 하는 컴포넌트로, react-router-dom 패키지에 속해 있다. 그런데 사실 이는 react-router 패키지에 속해 있는 <Router> 컴포넌트를 래핑 한 컴포넌트이다. <BrowserRouter> 컴포넌트는 <Router> 컴포넌트를 렌더링 할 때 props로 history 객체를 전달하는데, 이 객체는 history 패키지의 createBrowserHistory() 함수를 호출함으로써 생성된다. 해당 history 객체는 HTML5 history API 기반으로 브라우저에서 쉽게 내비게이션 기능을 구현할 수 있도록 각종 API를 제공하는 역할을 수행한다.

Switch, Routes : Route로 생성된 자식컴포넌트중 매칭되는 첫번째 Route를 렌더링해줍니다. Switch 사용 안할시 자식 모든 컴포넌트를 랜더링 한다. (v6 부터 Switch 의 네이밍이 Routes로 변경되었습니다)

Redirect : Redirect 같은 경우에는 처음에 path = "/"해서 기본 메인을 정할 때 Redirect로 정해진 곳으로 바로 이동할 수 있게 함.
            <Route path ="/home" element={<Navigate replace to="/home"/>} />
v6 버전부터 이렇게 형식이 바뀌였다.

 

 

App.js

 

header  - 헤더 side_bar - 사이드바 home, dev - 가운데 메인 내용

 

import React from 'react';

import {Route, BrowserRouter, Routes, Navigate} from 'react-router-dom';

import Home from './routes/Home';
import Dev from './routes/Dev';
import Header from './modules/head'
import Footer from './modules/footer'
import Side_bar from './modules/side_bar'

function App() {
    return (

        <BrowserRouter>

            <Header/>
            <Side_bar/>

            <Routes>
                <Route path ="/" element={<Navigate replace to="/home"/>} />
                <Route path ="/home" element={<Home />} />
                <Route path ="/dev" element={<Dev />} />
            </Routes> 

            <Footer/>

        </BrowserRouter>

    );
}

export default App;

 

index.js

 

import App from './App';

import React from 'react';
import { createRoot } from 'react-dom/client';

import '../assets/css/style.scss'

const root = createRoot(document.getElementById('wrap'));
root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>

  );

 

index.html

 

<!DOCTYPE  html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>React-Example</title>
	</head>
	<body>
			<div id="wrap" class="wrap"></div>

	</body>
</html>

 

side_bar.js

 

import React from 'react';

import {NavLink, Link} from 'react-router-dom'

import '../../assets/css/style.scss'

import '../../assets/js/main.js'



function Side_bar() {

	return (

	/* Sidebar */

  // <aside id="sidebar" className="sidebar">
  <div id="sidebar" class="sidebar">
    <ul className="sidebar-nav" id="sidebar-nav">

    <li className="nav-item">
        <a className="nav-link" data-bs-target="#components-nav" data-bs-toggle="collapse" href="#">
          <i className="bi bi-menu-button-wide"></i><span>통합관리자</span><i className="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul id="components-nav" className="nav-content collapse show" data-bs-parent="#sidebar-nav">
          <li>
            <NavLink to="/home" class= "active"> 
              <i className="bi bi-circle"></i><span>운영</span>
            </NavLink>
          </li>
          <li>
            <NavLink to="/dev"> 
              <i className="bi bi-circle"></i><span>개발</span>
            </NavLink>
          </li>
        </ul>
      </li>

      <li className="nav-item">
        <a className="nav-link collapsed" href="index.html">
          <i className="bi bi-grid"></i>
          <span>공지사항</span>
        </a>
      </li>

      
    </ul>
  </div>
 /* End Sidebar */


	);
}

export default Side_bar;

 

 

NavLink 사용시 해당 부분 클릭시 라우트 설정했던 링크로 가지고, class = "active" 속성이 추가 된다.

 

웹팩 속성에서 해당 속성 추가 시 해당 링크 직접 들어갈 시 웹페이지에 들어가진다

 

	 devServer: {
	 	historyApiFallback: true
	 }

 

 

※ Link 로 사이트 이동하지 않을때 예제 

  // return문 외부
  const testHandler = event => {
    if (inputValue.length <= 0) event.preventDefault();
  };

  // return문 내부
  <Link
    className={btnClass}
    to="/search"
    key={id}
    onClick={testHandler}
  >
    <img
      alt="cart close icon"
      src={url}
      className={iconClass}
    />
  </Link>

preventDefault 실행 시 기본 이벤트 동작이 작동하지 않는다.

저작자표시 (새창열림)
Comments