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

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

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

Cách phù hợp để nhận các tham số truy vấn với react-router v4 là gì?

Khả năng phân tích cú pháp các chuỗi truy vấn đã bị loại bỏ khỏi V4 vì đã có nhiều yêu cầu trong nhiều năm để hỗ trợ triển khai khác nhau. Cùng với đó, nhóm quyết định tốt nhất là người dùng nên quyết định việc triển khai đó trông như thế nào. Chúng tôi khuyên bạn nên nhập một chuỗi truy vấn lib. Đây là cái mà tôi sử dụng

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

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

Bạn cũng có thể sử dụng new URLSearchParamsnếu bạn muốn thứ gì đó có nguồn gốc và nó phù hợp với 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 tại đây

Câu trả lời được đưa ra là chắc chắn.

Nếu bạn muốn sử dụng mô-đun qs thay vì chuỗi truy vấn (chúng có mức độ phổ biến ngang nhau), đây là cú pháp:

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

Các ignoreQueryPrefix lựa chọn là để bỏ qua những dấu hỏi hàng đầu.

Câu trả lời được chấp nhận hoạt động tốt nhưng nếu bạn không muốn cài đặt thêm gói, bạn có thể sử dụng:

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

Được http://www.google.co.in/?key=value

getUrlParameter('key');

sẽ trở lại value

Một cách tiếp cận hữu ích khác có thể là sử dụng bên ngoài hộp URLSearchParamsnhư thế này;

  let { search } = useLocation();

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

Sạch sẽ, dễ đọc và không yêu cầu mô-đun. Thông tin thêm bên dưới;

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

Tôi đang nghiên cứu về các thông số cho bộ định tuyến phản ứng v4 và họ không sử dụng nó cho bộ định tuyến v4, không giống như bộ định tuyến phản ứng 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

Hở?

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

Tôi chỉ thực hiện điều này vì vậy không cần phải thay đổi toàn bộ cấu trúc mã (nơi bạn sử dụng truy vấn từ cửa hàng bộ định tuyến redux) nếu bạn cập nhật lên bộ định tuyến react v4 hoặc cao hơn từ phiên bản thấp hơn.

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

Rất dễ

chỉ sử dụng móc useParams()

Thí dụ:

Bộ định tuyến :

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

Trong các thành phần của bạn t:

export default function UserComponent() {

  const { id } = useParams();

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

Không cần bất kỳ gói nào:

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

Sau đó, bạn có thể tiếp cận các thông số liên quan với params.id