[React] react-router 응용편, Path Variable, Query String

 

 

 

 

1. Path Variable

 

    <Route path='diary/:id' element={<Diary />}/>

 

이런식으로 디테일 화면으로 갈때사용한다.. 

 

   const {id} = useParams(); // 전달받아서 모아서 객체

 

 

🐳 상세페이지 js

import {useParams} from "react-router-dom";

const Diary = () => {

    const {id} = useParams(); // 전달받아서 모아서 객체
    console.log(id)
    return (
        <div>
            <h1>Diary</h1>
            <p>이곳은 일기 상세 페이지 입니다.</p>
        </div>
    );


}

export default Diary;

 

🐳 App.js

import "./App.css"
import {BrowserRouter, Route, Routes} from "react-router-dom";

import RouterTests from './components/RouterTest'
import Home from "./pages/Home"
import New from "./pages/New";
import Edit from "./pages/Edit";
import Diary from "./pages/Diary";

function App() {
    return (
        <BrowserRouter>
        <div className="App">
            <h2>App.js</h2>
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/new' element={<New />} />
                <Route path='/edit' element={<Edit />}/>
                <Route path='diary/:id' element={<Diary />}/> << == 이부분 :id 와 매칭
            </Routes>
            <RouterTests />
        </div>
        </BrowserRouter>
    );
}

export default App;

 

 

 

2. Query String

 

 

 

import {useSearchParams} from "react-router-dom";

const Edit = () => {

    /// TODO : Query String
    const [searchParams,setSearchParams] = useSearchParams();

    const id = searchParams.get("id");
    console.log("id == " + id);

    const mode = searchParams.get("mode");
    console.log("mode == " + mode);

    return (
        <div>
            <h1>Edit</h1>
            <p>이곳은 일기 수정 페이지 입니다.</p>
            <button onClick={()=> setSearchParams({ who : "winer"})}>바꾸기</button>
        </div>
    );
}

export default Edit;

 

 

3. Paging Moving

 /// Paging Moving
    const navigate = useNavigate();
    
    
    <button onClick={() => {
                navigate("/")
            }}>홈</button>

 

import {useNavigate, useSearchParams} from "react-router-dom";

const Edit = () => {

    /// Paging Moving
    const navigate = useNavigate();

    /// TODO : Query String
    const [searchParams,setSearchParams] = useSearchParams();

    const id = searchParams.get("id");
    console.log("id == " + id);

    const mode = searchParams.get("mode");
    console.log("mode == " + mode);

    return (
        <div>
            <h1>Edit</h1>
            <p>이곳은 일기 수정 페이지 입니다.</p>
            <button onClick={()=> setSearchParams({ who : "winer"})}>바꾸기</button>


            <button onClick={() => {
                navigate("/")
            }}>홈</button>

            <button onClick={() => {
                navigate(-1)
            }}>뒤로가기</button>
        </div>
    );
}

export default Edit;