Cách nhận thông số truy vấn trong phản ứng-bộ định tuyến v4

Question

Tôi đang sử dụng phản ứng-router-dom 4.0.0-beta.6 trong dự án của mình. Tôi có một mã số như sau:

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

Và tôi muốn nhận được params truy vấn trong HomePage thành phần. Tôi đã tìm thấy thông số location.search, trông giống như sau: ?key=value, vì vậy nó không được phân tích.

Cách đúng để nhận thông số truy vấn bằng phản hồi-bộ định tuyến v4 là gì?

Answer 1

Khả năng phân tích chuỗi truy vấn được lấy ra khỏi V4 vì đã có các yêu cầu trong những năm qua để hỗ trợ triển khai khác nhau. Cùng với đó, nhóm đã quyết định sẽ tốt nhất cho người dùng để quyết định triển khai thực hiện đó. Chúng tôi khuyên bạn nên nhập một chuỗi truy vấn lib. Here's one that I use

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

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

Bạn cũng có thể sử dụng new URLSearchParams nếu bạn muốn một cái gì đó tự nhiên và nó hoạt động cho nhu cầu của bạn

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

Bạn có thể đọc thêm về quyết định here

Answer 2

Với câu trả lời dường như hoàn hảo, Nhưng nếu bạn không muốn sử dụng thêm npm, thì người dùng có thể sử dụng chức năng nhỏ này.

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, ' ')); 
    }; 

Ví dụ URL: http://www.google.co.in/?key=value

getUrlParameter('key'); 

sẽ cho sản lượng giá trị

Answer 3

tôi đã nghiên cứu về params cho phản ứng Router v4, và họ không sử dụng nó cho v4 , không giống như phản ứng router v2/3. Tôi sẽ để lại một chức năng khác - có thể ai đó sẽ thấy nó hữu ích. Bạn chỉ cần es6 hoặc javascript đơn giản.

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; 
} 

Ngoài ra, chức năng này có thể được cải thiện