리액트 페이지마다 url 나누기 +404만들기

 

페이지 나누는 법 (리액트 사용)

1. 컴포넌트 만들어서 상세페이지 내용 채움

2. 누가 /detail접속하면 그 컴포넌트 보여줌

 

이걸 도와주는 라이브 러리를 설치한다. (react-router-dom)

npm install react-router-dom@6

 

 

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

BrowerRouter 태그로 App을 감싸준다.

 

그 후에 App.js에 다음 라이브러리를 임폴트 시킨다.

 

import { Routes, Route, Link } from 'react-router-dom'

 

사용하는 방법은 이렇다

  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<div>메인페이지</div>} />
        <Route path="/detail" element={<div>상세페이지</div>} />
      </Routes>

import './App.css';
import {Navbar,Container,Nav,Button,Row,Col} from 'react-bootstrap';
import data from './data.js'
import { useState } from 'react';
import { Routes, Route, Link } from 'react-router-dom'
function App() {

  let [shoes] = useState(data);

  return (
    <div className="App">


     <Navbar bg="dark" data-bs-theme="dark">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

      <Link to="/">홈</Link>
      <Link to="/detail">상세페이지</Link>

      <Routes>
        <Route path="/" element={
          <>
          <div className="main-bg"></div>s
          <div className="container">
            <div className="row">
              {
                shoes.map((a,index)=>{
                  return (<Card shoes={a} index={index}/>);
                })
    
              }
            </div>
          </div> 
          </>
        } />
        <Route path="/detail" element={<div>상세페이지</div>} />
      </Routes>

    </div>
  );
}

function Card(props){
  console.log(props.index);
  return( 
    <div className="col-md-4">
      <img src={process.env.PUBLIC_URL + "/shoes"+(props.index+1)+".jpeg"} />
      <h4>{props.shoes.title}</h4>
      <p>{props.shoes.content}</p>
    </div>
  );
}

export default App;

 

헤더를 제외한 코드를 Router 단위로 쪼개주면 사용하기 편리해진다.

 

<Link>태그를 이용해서 카테고리를 나눌 수 있다.

 

 

 

react-router-dom 라이브러리에는 페이지 이동을 도와주는 navigate도 사용할 수 있다.

 

import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom'

     <Navbar bg="dark" data-bs-theme="dark">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link onClick={()=>{navigate('/')}}>Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link onClick={()=>{navigate('/detail')}}>detail</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

onClick 이번테로 만들면 원하는 url로 이동이 가능해진다. navigate(-1)을 입력하면 이전페이지로 이동도 된다.

 

 

404 페이지는 *를 이용한다. 입력한 Route 외에는 모두 이곳으로 간다.

        <Route path="*" element={
          <div>없는 페이지예요</div>
        } />

 

 

3. Nested Routes

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

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

위 아래는 같은 문법이다.

function About(){
  return(
    <div>
     회사 정보임
     <Outlet></Outlet>
    </div>
  );
}

 

Route안에 Route는 해당 컴포넌트 안에 Outlet 태그를 달아주는 곳에 표시 된다.