REACT_Router

 

https://reactrouter.com/en/main

Docs | React Router

 

 

 

https://www.npmjs.com/package/react-router-dom

react-router-dom

 

npm i react-router-dom

 

 

 

https://hemamca.wordpress.com/2015/03/02/rest-and-restful-routes-in-rails/

REST and RESTful Routes in Rails

 

 

 

import React from 'react'
import { Container } from 'react-bootstrap'
import { useParams } from 'react-router-dom'

const ProductDetailPage = () => {
    const params = useParams();
    // console.log("결과는 뭐가 나오지?", params);
  return (
    <>
    <Container className='mt-5'>
        <h1>ProductDetailPage</h1>

        <p>아이디 :  </p>
        <p>넘버 :  </p>
    </Container>
    </>
  )
}

export default ProductDetailPage

 

파람 

import React from 'react'
import { Container } from 'react-bootstrap'
import { useParams } from 'react-router-dom'

const ProductDetailPage = () => {
    const {id, num} = useParams();
    // console.log("결과는 뭐가 나오지?", params);
  return (
    <>
    <Container className='mt-5'>
        <h1>ProductDetailPage</h1>

        <p>아이디 : {id} </p>
        <p>넘버 : {num} </p>
    </Container>
    </>
  )
}

export default ProductDetailPage

 

 

쿼리와 파라미터 차이 

: 쿼리를 계속 추가해도 경로에 영향 x

파라미터처럼 / 슬러시 사용하면 경로에 영향을 o

 

 

http://localhost:3000/products?q=모자&num=34

 

 

redirect 

 

import logo from './logo.svg';
import 'bootstrap/dist/css/bootstrap.min.css'
import './App.css';
import MainHome from './page/MainHome';
import AboutUs from './page/AboutUs';
import { Route, Routes,Navigate } from 'react-router-dom';
import ProductPage from './page/ProductPage';
import ProductDetailPage from './page/ProductDetailPage';
import MyPage from './page/MyPage';
import LoginPage from './page/LoginPage';
import { useState } from 'react';

function App() {

  const [authenticate, setAuthenticate] = useState(false)

  // 로그인페이지로 리다이렉트합니다. <Navigate to="/login" />
  const PrivateRoute = () =>{
    return authenticate === true ? <MyPage /> : <Navigate to="/login"/>

  }
  return (
    <div className="App">
      <Routes>
        <Route path='/' element= {<MainHome />}/>
        <Route path='/aboutUs' element= {<AboutUs />}/>
        <Route path='/products' element= {<ProductPage />}/>
        <Route path='/products/:id/:num' element= {<ProductDetailPage />}/>
        <Route path='/login' element= {<LoginPage />}/>
        <Route path='/mypage' element= {<PrivateRoute />}/>
      </Routes>
   
    </div>
  );
}

export default App;

// 로그인페이지로 리다이렉트합니다. <Navigate to="/login" />
  const PrivateRoute = () =>{
    return authenticate === true ? <MyPage /> : <Navigate to="/login"/>

  }