React JS의 라우팅

안녕하세요 여러분 오늘은 react-router-dom을 사용하여 웹사이트의 다른 페이지로 라우팅하는 방법을 보여드리겠습니다.

React Router는 React에서 라우팅을 위한 표준 라이브러리입니다. React 애플리케이션의 다양한 구성 요소 보기 간 탐색을 활성화하고 브라우저 URL을 변경할 수 있으며 UI를 URL과 동기화 상태로 유지합니다.

먼저 터미널에 다음 명령을 입력하십시오.

npm install --save react-router-dom reactstrap bootstrap

그런 다음 필요한 모듈을 가져올 것입니다.

import React,{useState} from 'react'
import {Navbar,NavbarBrand,Nav,NavItem,NavLink,Collapse,NavbarToggler} from 'reactstrap';//importing react-strap components
import {BrowserRouter as Router,Link,Route,Routes} from 'react-router-dom';//importing routing elements

먼저 라우팅에 사용할 HOME, ABOUT 및 CONTACT 페이지에 대한 세 가지 기능을 만듭니다.

/Home page function
function Home() {
  return <h1 className="text-center display-3 text-primary">This is Home Page</h1>
}

//About page function
function About() {
  return <h1 className="text-center display-3 text-success">This is About Page</h1>
}

//Contact page function
function Contact() {
  return <h1 className="text-center display-3 text-danger">This is Contact Page</h1>
}

그런 다음 라우터 구성 요소를 탐색 표시줄의 진입점으로 사용합니다.

<Router>
//your navbar
</Router>

그런 다음 react-strap을 사용하여 navbar를 생성합니다.

 <Navbar dark color="faded" className="text-dark" style={{backgroundColor:"#1F2833"}}>
        <NavbarBrand style={{color:"peachpuff",fontSize:"3rem"}}>
          Coder Academy
        </NavbarBrand>
        <NavbarToggler onClick={isToggle} />

        <Collapse isOpen={toggle} navbar>
          <Nav navbar className="text-center">

            <NavItem>
              <NavLink style={Links}>
                <Link to="/">Home</Link>
              </NavLink>
            </NavItem>
<NavItem>
              <NavLink style={Links}>
              <Link to="/about">About</Link>
              </NavLink>
            </NavItem>
<NavItem>
              <NavLink style={Links}>
              <Link to="/contact">Contact</Link>
              </NavLink>
            </NavItem>

          </Nav>
        </Collapse>
      </Navbar>

Link 태그를 사용하여 링크를 래핑한 것을 알고 계셨습니까?
그것은 링크를 클릭할 때 링크가 취할 경로를 가리키는 반응 라우터 구성 요소입니다.

Link 태그는 이렇게 사용할 수 있습니다.

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

여기에서 'to' 속성은 링크를 통해 이동할 URL을 가리키는 데 사용됩니다.

다음으로 Switch 태그를 사용하여 링크를 사용하여 일부 경로로 라우팅할 때 표시되는 구성 요소를 제공합니다.

Routes 태그를 사용하는 방법은 다음과 같습니다.

   <Routes>
        <Route exact path="/"
       element={<Home />} />        

        <Route path="/about"
       element={<About />} />

        <Route path="/contact"
       element={<Contact />} />
    </Routes>

여기서 태그는 url이 첨부된 경로로 라우팅하는 데 사용됩니다. 따라서 사용자가 홈 링크를 클릭하면 경로는 홈 기능 내에서 콘텐츠를 로드합니다. 마찬가지로 사용자가 About 링크를 클릭하면 Route는 About 기능 구성 요소 내부의 콘텐츠를 로드하고 연락처 링크에 대해서도 동일하게 로드합니다.

여기서 'exact' 속성은 정확한 URL을 일치시키는 데 사용되며 찾지 못한 경우 다음 URL로 이동합니다.

'경로' 속성은 URL을 해당 URL로 라우팅할 때 렌더링해야 하는 구성 요소에 URL을 매핑하는 데 사용됩니다. (홈 링크를 클릭하면 홈 구성 요소 내부의 콘텐츠가 렌더링됨을 의미합니다.)

'요소' 속성은 URL이 경로와 일치할 때 렌더링될 요소를 전달하는 데 사용됩니다

.

전체 코드는 다음과 같습니다.

import React,{useState} from 'react'
import {Navbar,NavbarBrand,Nav,NavItem,NavLink,Collapse,NavbarToggler} from 'reactstrap';//importing react-strap components
import {BrowserRouter as Router,Link,Route,Switch} from 'react-router-dom';//importing routing elements


//Styling the Links
const Links = {
  color:"palevioletred",
  fontSize:"2.5rem",
  margin:"2rem 0",
  fontWeight:"600",
}

//Home page function
function Home() {
  return <h1 className="text-center display-3 text-primary">This is Home Page</h1>
}

//About page function
function About() {
  return <h1 className="text-center display-3 text-success">This is About Page</h1>
}

//Contact page function
function Contact() {
  return <h1 className="text-center display-3 text-danger">This is Contact Page</h1>
}

function ReactStrap() {
  const [toggle, setToggle] = useState(false);

  const isToggle = () => setToggle(!toggle);
  return (
    <div>
      <Router>
      <Navbar dark color="faded" className="text-dark" style={{backgroundColor:"#1F2833"}}>
        <NavbarBrand style={{color:"peachpuff",fontSize:"3rem"}}>
          Coder Academy
        </NavbarBrand>
        <NavbarToggler onClick={isToggle} />

        <Collapse isOpen={toggle} navbar>
          <Nav navbar className="text-center">

            <NavItem>
              <NavLink style={Links}>
                <Link to="/">Home</Link>
              </NavLink>
            </NavItem>

<NavItem>
              <NavLink style={Links}>
              <Link to="/about">About</Link>
              </NavLink>
            </NavItem>


            <NavItem>
              <NavLink style={Links}>
              <Link to="/contact">Contact</Link>
              </NavLink>
            </NavItem>
          </Nav>
        </Collapse>
      </Navbar>

    <Routes>
        <Route exact path="/"
       element={<Home />} />        

        <Route path="/about"
       element={<About />} />

        <Route path="/contact"
       element={<Contact />} />
    </Routes>

</Router>

    </div>
  )
}

export default ReactStrap

이 게시물을 확인해 주셔서 감사합니다.
^^ 아래 링크에서 기부로 저를 도울 수 있습니다 감사합니다👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

이 게시물도 확인하십시오.