소개

경로란 무엇입니까?

경로는 단순히 특정 경로입니다. 수업을 마치고 집에 가는 것과 마찬가지로 특정 경로를 사용하여 집에 가기로 결정할 수 있습니다. 마찬가지로 경로는 우리를 목표 목적지로 안내합니다.

반응으로 사용자가 다른 인터페이스나 보기를 표시하기 위해 특정 시간이나 작업에 표시하려는 여러 구성 요소가 있을 수 있습니다. 이 경우 경로가 중요한 역할을 합니다.

이 게시물에서는 3가지 구성 요소(home, about, contact)로 간단한 반응 앱을 만든 다음 간단한 경로를 사용하여 이러한 개별 구성 요소로 이동합니다.

1. 반응 앱 만들기:

우리는 npx를 사용할 것입니다.

npx create-react-app my-app
cd my-app
npm start

앱 구조

2. 다양한 구성 요소 만들기:

이제 src 폴더에 'components'라는 디렉토리를 만들고 모든 구성 요소를 배치합니다.

About.js

Home.js

Contact.js

Navbar.js

Footer.js

지금은 일부 데이터를 전달하지 않기 때문에 stateless(기능적) 구성 요소를 사용합니다.

샘플 navbar.js 파일은 다음과 같습니다.

import '../App.css';

let Nav =()=>{
    return (
        <div>
            <nav>
            <div className ='logo'>
                <p>Logo</p>
            </div>
            <div>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </div>
            </nav>
        </div>
    )
}

export default Nav

3. react-router-dom 설치:

npm install react-router-dom

4. App.js 파일에서 생성한 모든 구성 요소를 가져옵니다.

import "./App.css";
import Nav from "./components/nav";
import Footer from "./components/footer";
import About from "./components/about"
import Home from "./components/home"
import Contact from "./components/contact"

5. jsx에 Nav 및 Footer 구성 요소 추가

function App() {
  return (
      <div className="App">
        <Nav />
        <Footer />
      </div>

  );
}

6. Nav 구성 요소에서 반응 라우터 모듈의 NavLink를 가져오고 앵커 태그를 NavLink 태그로 바꿉니다. to 속성은 필요한 경로를 가리켜야 합니다. 예:

홈 구성요소의 '/' 및 '/home'
About 컴포넌트의 경우 '/about',
연락처 구성 요소의 경우 '/contact'입니다.

import {NavLink} from 'react-router-dom';

<nav>
    <div className ='logo'>
        <p>Logo</p>
    </div>
    <div>
        <ul>
            <li><NavLink to = '/home'>Home</NavLink></li>
            <li><NavLink to = '/about'>About</NavLink></li>
            <li><NavLink to = '/contact'>Contact</NavLink></li>
         </ul>
    </div>
</nav>

7. App.js의 react-router-dom에서 BrowserRouter 및 Route 가져오기

import { BrowserRouter, Route } from "react-router-dom";

6. BrowserRouter 태그의 App.js 구성 요소에서 반환되는 div를 래핑합니다. 그런 다음 Route 태그를 사용하여 각 태그를 지정합니다.

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Nav />
        <Route exact path = '/' component = {Home}></Route>
        <Route  path = '/home' component = {Home}></Route>
        <Route  path = '/about' component = {About}></Route>
        <Route  path = '/contact' component = {Contact}></Route>
        <Footer />
      </div>
    </BrowserRouter>
  );
}

7. 저장하고 새로 고친 다음 스크립트를 실행합니다.

npm start

이 디스플레이가 있어야 합니다.



다음은 github 저장소에 대한 링크입니다. 모든 코드와 css 파일도 포함되어 있습니다. 댓글과 가르침을 잘 남겨주세요. 감사
Github repo

다음: 반응 경로 구현(2부 - 링크 태그가 아닌 NavLink를 사용하는 이유)