react url 파라미터 여러 개 받기

설명

---

react에서 url로 파라미터 받는 방법입니다. (여러 개)

(예 : /url/:parameter)

create-react-app으로 코드의 기본 틀이 만들어져 있다고 가정합니다.

react url 파라미터 여러 개 받는 방법

---

router를 사용하고 Route의 path에 url/:파라미터 이름 를 설정하고 useParams()로 가져옵니다.

 

 

1. react-router-dom, react-dom을 설치합니다.

npm i react-router-dom react-dom

 

2. src/index.js를 다음과 같이 수정합니다.

import React from "react";
import { createRoot } from "react-dom/client";
import Router from "./Routes/index.js";


const container = document.getElementById("root");

const root = createRoot(container);
root.render(
    <Router />
);

 

3.  src/Routes/index.js 파일을 다음과 같이 생성합니다.

import React, { useEffect } from "react";
import { Route } from "react-router-dom";
import { BrowserRouter, Routes } from "react-router-dom";
import Lecture from "../Pages/Lecture/index.js";
const Router = () => {
    return (
        <BrowserRouter>
          <Routes>
            <Route path="/lecture/:lectureId/:userId" element={<Lecture />} />
          </Routes>
        </BrowserRouter>
    );
  
};

export default Router;

 

4. src/Pages/Lecture/index.js 파일을 다음과 같이 생성합니다. (Route의 path에 적은 파라미터 이름과 동일해야 합니다.)

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

const Lecture = () => {
  const { lectureId, userId } = useParams();
  console.log(lectureId);
  
  return (
    <div>
     {lectureId}
    <div/>
  );
};
export default Lecture;

 

참조

---

Get multiple URL parameters using useParams() hook