ฉันใช้ react-router-dom 4.0.0-beta.6 ในโครงการของฉัน ฉันมีรหัสดังต่อไปนี้:

<Route exact path="/home" component={HomePage}/>

และฉันต้องการรับพารามิเตอร์แบบสอบถามในHomePageองค์ประกอบ ฉันพบlocation.searchพารามิเตอร์ที่มีลักษณะเช่นนี้?key=valueดังนั้นจึงไม่มีการแยกวิเคราะห์

วิธีที่ถูกต้องในการรับพารามิเตอร์แบบสอบถามด้วย react-router v4 คืออะไร?

ความสามารถในการแยกวิเคราะห์สตริงการสืบค้นถูกนำออกจาก V4 เนื่องจากมีการร้องขอในช่วงหลายปีที่ผ่านมาเพื่อสนับสนุนการใช้งานที่แตกต่างกัน ด้วยเหตุนี้ทีมงานจึงตัดสินใจว่าจะเป็นการดีที่สุดสำหรับผู้ใช้ในการตัดสินใจว่าการใช้งานนั้นมีลักษณะอย่างไร เราขอแนะนำให้นำเข้า lib สตริงการสืบค้น นี่คือสิ่งที่ฉันใช้

const queryString = require('query-string');

const parsed = queryString.parse(props.location.search);

คุณยังสามารถใช้new URLSearchParamsถ้าคุณต้องการบางสิ่งบางอย่างที่เป็นของพื้นเมืองและเหมาะกับความต้องการของคุณ

const params = new URLSearchParams(props.location.search);
const foo = params.get('foo'); // bar

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับการตัดสินใจได้ที่นี่

คำตอบที่ได้รับนั้นมั่นคง

หากคุณต้องการใช้โมดูลqsแทนสตริงการสืบค้น (ซึ่งมีความนิยมเท่ากัน) นี่คือไวยากรณ์:

const query = qs.parse(props.location.search, {
  ignoreQueryPrefix: true
})

ignoreQueryPrefixตัวเลือกที่จะไม่สนใจเครื่องหมายคำถามชั้นนำ

อีกวิธีหนึ่งที่มีประโยชน์คือการใช้นอกกรอบURLSearchParamsเช่นนี้

  let { search } = useLocation();

   const query = new URLSearchParams(search);
   const paramField = query.get('field');
   const paramValue = query.get('value');

สะอาดอ่านได้และไม่ต้องใช้โมดูล ข้อมูลเพิ่มเติมด้านล่าง;

• https://reacttraining.com/react-router/web/example/query-parameters
• https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

คำตอบที่ยอมรับใช้งานได้ดี แต่ถ้าคุณไม่ต้องการติดตั้งแพ็คเกจเพิ่มเติมคุณสามารถใช้สิ่งนี้:

getUrlParameter = (name) => {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    let regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    let results = regex.exec(window.location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
  };

ให้ http://www.google.co.in/?key=value

getUrlParameter('key');

จะกลับมา value

ฉันกำลังค้นคว้าเกี่ยวกับ params สำหรับ react router v4 และพวกเขาไม่ได้ใช้กับ v4 ไม่เหมือนกับ react router v2 / 3 ฉันจะออกจากฟังก์ชั่นอื่น - อาจมีคนคิดว่ามันเป็นประโยชน์ คุณต้องใช้ es6 หรือจาวาสคริปต์ธรรมดาเท่านั้น

function parseQueryParams(query) {
  //You get a '?key=asdfghjkl1234567890&val=123&val2&val3=other'
  const queryArray = query.split('?')[1].split('&');
  let queryParams = {};
  for (let i = 0; i < queryArray.length; i++) {
    const [key, val] = queryArray[i].split('=');
    queryParams[key] = val ? val : true;
  }
  /* queryParams = 
     {
      key:"asdfghjkl1234567890",
      val:"123",
      val2:true,
      val3:"other"
     }
  */
  return queryParams;
}

นอกจากนี้ฟังก์ชันนี้ยังสามารถปรับปรุงได้

เอ๊ะ?

queryfie(string){
    return string
        .slice(1)
        .split('&')
        .map(q => q.split('='))
        .reduce((a, c) => { a[c[0]] = c[1]; return a; }, {});
}

queryfie(this.props.location.search);

ฉันเพิ่งทำสิ่งนี้ดังนั้นไม่จำเป็นต้องเปลี่ยนโครงสร้างโค้ดทั้งหมด (โดยที่คุณใช้แบบสอบถามจากที่เก็บเราเตอร์ redux) หากคุณอัปเดตเพื่อตอบสนองเราเตอร์ v4 หรือสูงกว่าจากเวอร์ชันที่ต่ำกว่า

https://github.com/saltas888/react-router-query-middleware

ง่ายมาก

เพียงแค่ใช้ตะขอ useParams()

ตัวอย่าง:

เราเตอร์ :

<Route path="/user/:id" component={UserComponent} />

ในส่วนประกอบของคุณ t:

export default function UserComponent() {

  const { id } = useParams();

  return (
    <>{id}</>
  );
}

โดยไม่ต้องใช้แพ็คเกจใด ๆ :

const params = JSON.parse(JSON.stringify(this.props.match.params));

จากนั้นคุณสามารถเข้าถึงพารามิเตอร์ที่เกี่ยวข้องด้วย params.id