Tôi đang sử dụng react và react-router cho ứng dụng của mình ở phía máy khách. Tôi dường như không thể tìm ra cách lấy các tham số truy vấn sau từ một url như:

http://xmen.database/search#/?status=APPROVED&page=1&limit=20

Các tuyến đường của tôi trông như thế này (đường dẫn hoàn toàn sai mà tôi biết):

var routes = (
<Route>
    <DefaultRoute handler={SearchDisplay}/>
    <Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/>
    <Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/>
</Route>
);

Tuyến đường của tôi đang hoạt động tốt nhưng tôi chỉ không chắc chắn cách định dạng đường dẫn để có được các tham số tôi muốn. Đánh giá cao bất kì sự giúp đỡ nào về điều này!

Lưu ý: Sao chép / Dán từ bình luận. Hãy chắc chắn để thích bài viết gốc!

Viết bằng es6 và sử dụng react 0.14.6 / react-router 2.0.0-rc5. Tôi sử dụng lệnh này để tra cứu các tham số truy vấn trong các thành phần của mình:

this.props.location.query

Nó tạo ra một hàm băm của tất cả các tham số truy vấn có sẵn trong url.

Cập nhật:

Đối với React-Router v4, hãy xem câu trả lời này . Về cơ bản, sử dụng this.props.location.searchđể lấy chuỗi truy vấn và phân tích cú pháp với query-stringgói hoặc URLSearchParams :

const params = new URLSearchParams(paramsString); 
const tags = params.get('tags');

CŨ (trước phiên bản 4):

Viết bằng es6 và sử dụng react 0.14.6 / react-router 2.0.0-rc5. Tôi sử dụng lệnh này để tra cứu các tham số truy vấn trong các thành phần của mình:

this.props.location.query

Nó tạo ra một hàm băm của tất cả các tham số truy vấn có sẵn trong url.

CẬP NHẬT (React Router v4 +):

this.props.location.query trong React Router 4 đã bị xóa (hiện đang sử dụng v4.1.1). Thông tin thêm về sự cố tại đây: https://github.com/ReactTraining/react-router/issues/4410

Có vẻ như họ muốn bạn sử dụng phương pháp của riêng mình để phân tích cú pháp các tham số truy vấn, hiện đang sử dụng thư viện này để lấp đầy khoảng trống: https://github.com/sindresorhus/query-string

Các câu trả lời trên sẽ không hoạt động react-router v4. Đây là những gì tôi đã làm để giải quyết vấn đề -

Cài đặt đầu tiên chuỗi truy vấn sẽ được yêu cầu để phân tích cú pháp.

npm install -save query-string

Bây giờ trong thành phần được định tuyến, bạn có thể truy cập vào chuỗi truy vấn chưa được phân tích cú pháp như thế này

this.props.location.search

Bạn có thể kiểm tra kỹ nó bằng cách đăng nhập vào bảng điều khiển.

Cuối cùng phân tích cú pháp để truy cập các tham số truy vấn

const queryString = require('query-string');
var parsed = queryString.parse(this.props.location.search);
console.log(parsed.param); // replace param with your own 

Vì vậy, nếu truy vấn như ?hello=world

console.log(parsed.hello) sẽ ghi lại world

cập nhật 2017.12.25

"react-router-dom": "^4.2.2"

url như

BrowserHistory: http://localhost:3000/demo-7/detail/2?sort=name

HashHistory: http://localhost:3000/demo-7/#/detail/2?sort=name

với sự phụ thuộc chuỗi truy vấn :

this.id = props.match.params.id;
this.searchObj = queryString.parse(props.location.search);
this.from = props.location.state.from;

console.log(this.id, this.searchObj, this.from);

các kết quả:

2 {sort: "name"} home

"react-router": "^2.4.1"

Url như http://localhost:8080/react-router01/1?name=novaline&age=26

const queryParams = this.props.location.query;

queryParams là một đối tượng chứa các tham số truy vấn: {name: novaline, age: 26}

Với Gói truy vấn chuỗi:

import qs from "stringquery";

const obj = qs("?status=APPROVED&page=1limit=20");  
// > { limit: "10", page:"1", status:"APPROVED" }

Với Gói chuỗi truy vấn:

import qs from "query-string";
const obj = qs.parse(this.props.location.search);
console.log(obj.param); // { limit: "10", page:"1", status:"APPROVED" } 

Không có gói:

const convertToObject = (url) => {
  const arr = url.slice(1).split(/&|=/); // remove the "?", "&" and "="
  let params = {};

  for(let i = 0; i < arr.length; i += 2){
    const key = arr[i], value = arr[i + 1];
    params[key] = value ; // build the object = { limit: "10", page:"1", status:"APPROVED" }
  }
  return params;
};


const uri = this.props.location.search; // "?status=APPROVED&page=1&limit=20"

const obj = convertToObject(uri);

console.log(obj); // { limit: "10", page:"1", status:"APPROVED" }


// obj.status
// obj.page
// obj.limit

Hy vọng rằng sẽ giúp :)

Chúc bạn viết mã vui vẻ!

"react-router-dom": "^5.0.0",

bạn không cần thêm bất kỳ mô-đun bổ sung nào trong thành phần có địa chỉ url như sau:

http: // localhost: 3000 / # /? thẩm quyền '

bạn có thể thử mã đơn giản sau:

    const search =this.props.location.search;
    const params = new URLSearchParams(search);
    const authority = params.get('authority'); //

Sau khi đọc các câu trả lời khác (Đầu tiên bởi @ duncan-finney và sau đó là @Marrs), tôi bắt đầu tìm nhật ký thay đổi giải thích cách giải quyết vấn đề này. Các tài liệu hướng dẫn về việc sử dụng vị trí (mà bạn cần cho các truy vấn) trong thành phần thực sự là mâu thuẫn với mã thực tế. Vì vậy, nếu bạn làm theo lời khuyên của họ, bạn sẽ nhận được những lời cảnh báo tức giận lớn như thế này:

Warning: [react-router] `context.location` is deprecated, please use a route component's `props.location` instead.

Nó chỉ ra rằng bạn không thể có một thuộc tính ngữ cảnh được gọi là vị trí sử dụng loại vị trí. Nhưng bạn có thể sử dụng thuộc tính ngữ cảnh được gọi là loc sử dụng kiểu vị trí. Vì vậy, giải pháp là một sửa đổi nhỏ trên nguồn của họ như sau:

const RouteComponent = React.createClass({
    childContextTypes: {
        loc: PropTypes.location
    },

    getChildContext() {
        return { location: this.props.location }
    }
});

const ChildComponent = React.createClass({
    contextTypes: {
        loc: PropTypes.location
    },
    render() {
        console.log(this.context.loc);
        return(<div>this.context.loc.query</div>);
    }
});

Bạn cũng có thể chỉ truyền lại những phần của đối tượng vị trí mà bạn muốn cho con cái của bạn nhận được cùng một lợi ích. Nó không thay đổi cảnh báo thay đổi thành loại đối tượng. Hy vọng rằng sẽ giúp.

Giải pháp js đơn giản:

queryStringParse = function(string) {
    let parsed = {}
    if(string != '') {
        string = string.substring(string.indexOf('?')+1)
        let p1 = string.split('&')
        p1.map(function(value) {
            let params = value.split('=')
            parsed[params[0]] = params[1]
        });
    }
    return parsed
}

Và bạn có thể gọi nó từ mọi nơi bằng cách sử dụng:

var params = this.queryStringParse(this.props.location.search);

Hi vọng điêu nay co ich.

Bạn có thể gặp lỗi sau khi tạo bản dựng sản xuất được tối ưu hóa khi sử dụng mô-đun chuỗi truy vấn .

Không thể rút gọn mã khỏi tệp này: ./node_modules/query-string/index.js:8

Để khắc phục điều này, vui lòng sử dụng mô-đun thay thế có tên là stringquery , mô-đun này thực hiện tốt quá trình tương tự mà không gặp bất kỳ sự cố nào trong khi chạy bản dựng.

import querySearch from "stringquery";

var query = querySearch(this.props.location.search);