[react] 라우팅하기...3: useParams()

java의 @PathVariable처럼 주소에 정보를 담아 그 값을 가져올 수 있다.

방법은 라우터에서 미리 param을 선언해 주고 그 주소의 결과페이지에서 사용하면 된다.

• App.js

import './App.css';
import Footer from './components/footer';
import Header from './components/header';
import HomePage from './pages/homePage';
import { Route,Routes } from 'react-router-dom';
import Login from './pages/login';

function App() {
 
  return (
    <div>
      <Header />
      <Routes>
        <Route path="/" exact={true} element={<HomePage />} />
        <Route path="/login/:id" exact={true} element={ <Login/>}/>
      </Routes>
      <Footer />
    </div>
  );
}

export default App;

Route태그의 path속성에 주소와 함께 param을 선언해 준다.

형식은 path = “주소/:param”이다.

• loginPage.js

import {useParams} from "react-router-dom";
function Login(props) { 
    console.log(useParams());
    return <div>로그인페이지</div>
}
export default Login;

콘솔창에 params가 뜨는것을 볼 수 있다.

만약 id값만 가져오고 싶다면

import React from "react";
import {useParams} from "react-router-dom";
function Login(props) { 
    const { id } = useParams();
    console.log(id);
    return <div>로그인페이지</div>
}
export default Login;

가져오고 싶은 변수를 중괄호 안에 싸서 가져올 수 있다.