>source

나는 react-router-dom을 사용하고 있으며 문서에 따르면 url 패턴에 대해 말합니다.https:\\example.com\user\:id\:성별우리는 사용할 수 있습니다useParams()다음과 같은 패턴을 읽는 후크

import {useParams, Route} from react-router;
const user=(props)=>{
const params= useParams()
}
//params= {id:'1',gender:'f'}; output for url pattern >>> https:\\example.com\user\1\f

하지만 제 경우에는 두 가지 요구 사항이 있습니다.

  1. 성별 필드가 필요할 때도 있고 그렇지 않을 때도 있습니다. 그러면 라우터에서 어떤 변경이 필요할까요?
  2. URL 패턴 읽는 방법https://example.com/user?id=1& 성별=f, 왜냐하면 이 패턴에서 내가 순서를 바꾸면 매개변수 개체에 영향이 없을 것이기 때문입니다.
  • 답변 # 1

    위에서 논의한 것처럼 URL에 선택적 데이터를 추가하려는 경우 쿼리 매개변수를 사용해야 합니다.

    모든 URL에서 쿼리 매개변수를 추출하기 위해 react-router-dom 라이브러리에서 제공하는 "useLocation()" 후크를 사용하면 됩니다.

    //https://example.com/user?id=1&
    gender=f
    import React from "react";
    import { useLocation } from "react-router-dom";
    function QueryParamsDemo() {
      let query= useLocation().search;
      let getParams= ()=> console.log(query); //output will be {id:1,gender:"f"}
      return (
        <div>      <button onClick={()=> getParams()}>Get Param</button>    </div>  );
    }
    

  • 답변 # 2

    다음과 같이 params를 구조화하여 어디에서나 사용할 수 있습니다.

    const { id , gender }= useParams();
    

  • 이전 Python에서 데이터 프레임 분할을 나타내는 최소 n 행 그룹을 나타내는 새 열 만들기
  • 다음 python : 슬라이딩 창 및 DataFrame의 요소를 임계값과 비교