React - Cách nhận giá trị tham số từ chuỗi truy vấn

Làm cách nào tôi có thể xác định tuyến đường trong tệp records.jsx của mình để nắm bắt __firebase_request_keygiá trị tham số từ một URL được tạo bởi quá trình đăng nhập duy nhất của Twitter sau khi chuyển hướng từ máy chủ của họ?

http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla

Tôi đã thử với cấu hình các tuyến đường sau, nhưng :redirectParamkhông bắt được thông số đã đề cập:

<Router>
  <Route path="/" component={Main}>
    <Route path="signin" component={SignIn}>
      <Route path=":redirectParam" component={TwitterSsoButton} />
    </Route>
  </Route>
</Router>

Bộ định tuyến phản ứng v3

React Router đã phân tích vị trí cho bạn và chuyển nó đến RouteComponent của bạn dưới dạng đạo cụ. Bạn có thể truy cập phần truy vấn (sau? Trong url) thông qua

this.props.location.query.__firebase_request_key

Nếu bạn đang tìm kiếm các giá trị tham số đường dẫn, được phân tách bằng dấu hai chấm (:) bên trong bộ định tuyến, chúng có thể truy cập thông qua

this.props.match.params.redirectParam

Điều này áp dụng cho các phiên bản React Router v3 muộn (không chắc chắn). Các phiên bản bộ định tuyến cũ hơn đã được báo cáo để sử dụngthis.props.params.redirectParam .

React Router v4 và React Router v5, chung

React Router v4 không phân tích cú pháp truy vấn cho bạn nữa, nhưng bạn chỉ có thể truy cập nó qua this.props.location.search. Vì lý do, xem câu trả lời của nbeuchat .

Ví dụ: với thư viện qs được nhập như qsbạn có thể làm

qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).__firebase_request_key

Một thư viện khác sẽ là chuỗi truy vấn . Xem câu trả lời này để biết thêm một số ý tưởng về phân tích chuỗi tìm kiếm. Nếu bạn không cần tương thích với IE, bạn cũng có thể sử dụng

new URLSearchParams(this.props.location.search).get("__firebase_request_key")

Đối với các thành phần chức năng, bạn sẽ thay thế this.props.locationbằng hook sử dụngLocation . Lưu ý, bạn có thể sử dụng window.location.search, nhưng điều này sẽ không cho phép kích hoạt kết xuất React trên các thay đổi. Nếu thành phần (không chức năng) của bạn không phải là con trực tiếp của Switchbạn cần sử dụng vớiRouter để truy cập bất kỳ bộ định tuyến nào được cung cấp.

Chung

đề nghị của nizam.sp

console.log(this.props)

sẽ hữu ích trong mọi trường hợp.

Bộ định tuyến phản ứng v4

Sử dụng component

<Route path="/users/:id" component={UserPage}/> 

this.props.match.params.id

Các thành phần được tự động kết xuất với các đạo cụ tuyến đường.

Sử dụng render

<Route path="/users/:id" render={(props) => <UserPage {...props} />}/> 

this.props.match.params.id

Đạo cụ tuyến đường được chuyển đến chức năng kết xuất.

Bộ định tuyến phản ứng v3

Với React Router v3, bạn có thể nhận được chuỗi truy vấn từ this.props.location.search(? Qs1 = naisarg & qs2 = parmar). Ví dụ, với let params = queryString.parse(this.props.location.search), sẽ cung cấp cho{ qs1 : 'naisarg', qs2 : 'parmar'}

Bộ định tuyến phản ứng v4

Với React Router v4, this.props.location.querynó không còn tồn tại nữa. Bạn cần sử dụng this.props.location.searchthay thế và phân tích các tham số truy vấn một mình hoặc sử dụng gói hiện có, chẳng hạn như query-string.

Thí dụ

Dưới đây là một ví dụ tối thiểu sử dụng React Router v4 và query-stringthư viện.

import { withRouter } from 'react-router-dom';
import queryString from 'query-string';

class ActivateAccount extends Component{
    someFunction(){
        let params = queryString.parse(this.props.location.search)
        ...
    }
    ...
}
export default withRouter(ActivateAccount);

Hợp lý

Nhóm hợp lý của React Router để xóa thuộc querytính là:

Có một số gói phổ biến thực hiện phân tích / xâu chuỗi truy vấn hơi khác nhau và mỗi khác biệt này có thể là cách "chính xác" đối với một số người dùng và "không chính xác" đối với những người khác. Nếu React Router chọn "đúng", nó sẽ chỉ đúng với một số người. Sau đó, nó sẽ cần thêm một cách để người dùng khác thay thế trong gói phân tích truy vấn ưa thích của họ. React Router không sử dụng nội bộ chuỗi tìm kiếm mà yêu cầu nó phân tích các cặp giá trị khóa, do đó không cần phải chọn một trong những chuỗi này là "đúng".

[...]

Cách tiếp cận được thực hiện cho 4.0 là loại bỏ tất cả các tính năng "bao gồm pin" và quay lại chỉ định tuyến cơ bản. Nếu bạn cần phân tích chuỗi truy vấn hoặc tải không đồng bộ hoặc tích hợp Redux hoặc một cái gì đó rất cụ thể, thì bạn có thể thêm nó vào một thư viện dành riêng cho trường hợp sử dụng của bạn. Ít hành trình được đóng gói trong đó bạn không cần và bạn có thể tùy chỉnh mọi thứ theo sở thích và nhu cầu cụ thể của mình.

Bạn có thể tìm thấy các cuộc thảo luận đầy đủ trên GitHub .

Theo tôi biết có ba phương pháp bạn có thể làm điều đó.

1. sử dụng biểu thức chính quy để có được chuỗi truy vấn.

2. bạn có thể sử dụng api trình duyệt. hình ảnh url hiện tại là như thế này:

http://www.google.com.au?token=123

chúng tôi chỉ muốn nhận 123;

Đầu tiên

 const query = new URLSearchParams(this.props.location.search);

Sau đó

const token = query.get('token')
console.log(token)//123

3. sử dụng thư viện thứ ba gọi là 'chuỗi truy vấn'. Đầu tiên cài đặt nó

npm i query-string

Sau đó nhập nó vào tệp javascript hiện tại:

 import queryString from 'query-string'

Bước tiếp theo là lấy 'mã thông báo' trong url hiện tại, hãy làm như sau:

const value=queryString.parse(this.props.location.search);
const token=value.token;
console.log('token',token)//123

Hy vọng nó giúp.

Cập nhật ngày 25/02/2019

4. nếu url hiện tại trông như sau:

http://www.google.com.au?app=home&act=article&aid=160990

chúng tôi xác định một hàm để có được các tham số:

function getQueryVariable(variable)
{
        var query = window.location.search.substring(1);
        console.log(query)//"app=article&act=news_content&aid=160990"
        var vars = query.split("&");
        console.log(vars) //[ 'app=article', 'act=news_content', 'aid=160990' ]
        for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    console.log(pair)//[ 'app', 'article' ][ 'act', 'news_content' ][ 'aid', '160990' ] 
        if(pair[0] == variable){return pair[1];}
         }
         return(false);
}

Chúng tôi có thể nhận được 'viện trợ' bằng cách:

getQueryVariable('aid') //160990

React Router v4 không còn props.location.query đối tượng (xem github thảo luận về ). Vì vậy, câu trả lời được chấp nhận sẽ không hoạt động cho các dự án mới hơn.

Một giải pháp cho v4 là sử dụng chuỗi truy vấn bên ngoài thư viện để phân tích cú phápprops.location.search

const qs = require('query-string');
//or
import * as qs from 'query-string';

console.log(location.search);
//=> '?foo=bar'

const parsed = qs.parse(location.search);
console.log(parsed);
//=> {foo: 'bar'}

Khi sử dụng móc React không có quyền truy cập this.props.location. Để nắm bắt các tham số url sử dụng windowđối tượng.

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

Bộ định tuyến phản ứng v4

const urlParams = new URLSearchParams(this.props.location.search)
const key = urlParams.get('__firebase_request_key')

Xin lưu ý rằng nó hiện đang thử nghiệm.

Kiểm tra tính tương thích của trình duyệt tại đây: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams#Browser_compabilities

bạn có thể kiểm tra bộ định tuyến phản ứng , đơn giản, bạn có thể sử dụng mã để lấy tham số truy vấn miễn là bạn đã xác định trong bộ định tuyến của mình:

this.props.params.userId

Bộ định tuyến phản ứng 5.1+

5.1 giới thiệu các móc khác nhau như thế useLocationvà useParamscó thể được sử dụng ở đây.

Thí dụ:

<Route path="/test/:slug" component={Dashboard} />

Sau đó, nếu chúng tôi đến thăm nói

http://localhost:3000/test/signin?_k=v9ifuf&__firebase_request_key=blablabla

Bạn có thể lấy nó như thế nào

import { useLocation } from 'react-router';
import queryString from 'query-string';

const Dashboard: React.FC = React.memo((props) => {
    const location = useLocation();

    console.log(queryString.parse(location.search));

    // {__firebase_request_key: "blablabla", _k: "v9ifuf"}

    ...

    return <p>Example</p>;
}

Nếu bộ định tuyến của bạn là như thế này

<Route exact path="/category/:id" component={ProductList}/>

Bạn sẽ nhận được id như thế này

this.props.match.params.id

Với lớp lót này, bạn có thể sử dụng nó ở bất cứ đâu trong cả Thành phần lớp React Hook và Lớp React với JavaScript đơn giản.

https://www.hunterisgod.com/?city=Leipzig

let city = (new URLSearchParams(window.location.search)).get("city")

Nếu bạn không nhận được this.props... bạn đang mong đợi dựa trên các câu trả lời khác, bạn có thể cần phải sử dụng withRouter( docs v4 ):

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>You are now at {location.pathname}</div>
    )
  }
}

// Create a new component that is "connected" (to borrow redux terminology) to the router.  
const TwitterSsoButton = withRouter(ShowTheLocation)  

// This gets around shouldComponentUpdate
withRouter(connect(...)(MyComponent))

// This does not
connect(...)(withRouter(MyComponent))

Tôi đã có một thời gian khó khăn để giải quyết vấn đề này. Nếu không có công việc nào ở trên, bạn có thể thử điều này thay thế. Tôi đang sử dụng ứng dụng tạo phản ứng

Yêu cầu

Reac-router-dom ":" ^ 4.3.1 "

Giải pháp

Tại vị trí nơi bộ định tuyến được chỉ định

<Route path="some/path" ..../>

Thêm tên tham số mà bạn muốn truyền vào như thế này

<Route path="some/path/:id" .../>

Tại trang nơi bạn đang hiển thị một số / đường dẫn, bạn có thể chỉ định điều này để xem id cuộc gọi tên tham số như thế này

componentDidMount(){
  console.log(this.props);
  console.log(this.props.match.params.id);
}

Ở cuối nơi bạn xuất mặc định

export default withRouter(Component);

Nhớ bao gồm nhập

import { withRouter } from 'react-router-dom'

Khi console.log (this.props) bạn sẽ có thể những gì đã được truyền lại. Chúc vui vẻ!

React routertừ v4 trở đi không còn cung cấp cho bạn query paramstrực tiếplocation đối tượng . Lý do là

Có một số gói phổ biến thực hiện phân tích / xâu chuỗi truy vấn hơi khác nhau và mỗi khác biệt này có thể là cách "chính xác" đối với một số người dùng và "không chính xác" đối với những người khác. Nếu React Router chọn "đúng", nó sẽ chỉ đúng với một số người. Sau đó, nó sẽ cần thêm một cách để người dùng khác thay thế trong gói phân tích truy vấn ưa thích của họ. React Router không sử dụng nội bộ chuỗi tìm kiếm mà yêu cầu nó phân tích các cặp giá trị khóa, do đó không cần phải chọn một trong những chuỗi này là "đúng".

Đã bao gồm điều đó, sẽ có ý nghĩa hơn khi chỉ phân tích location.search trong các thành phần xem của bạn đang mong đợi một đối tượng truy vấn.

Bạn có thể làm điều này một cách khái quát bằng cách ghi đè withRoutertừ react-routerthích

customWithRouter.js

import { compose, withPropsOnChange } from 'recompose';
import { withRouter } from 'react-router';
import queryString from 'query-string';

const propsWithQuery = withPropsOnChange(
    ['location', 'match'],
    ({ location, match }) => {
        return {
            location: {
                ...location,
                query: queryString.parse(location.search)
            },
            match
        };
    }
);

export default compose(withRouter, propsWithQuery)

componentDidMount(){
    //http://localhost:3000/service/anas
    //<Route path="/service/:serviceName" component={Service} />
    const {params} =this.props.match;
    this.setState({ 
        title: params.serviceName ,
        content: data.Content
    })
}

Có thể hơi muộn nhưng hook phản ứng này có thể giúp bạn nhận / đặt giá trị trong truy vấn URL: https://github.com/rudyhuynh/use-url-search-params (do tôi viết).

Nó hoạt động có hoặc không có react-router. Dưới đây là mẫu mã trong trường hợp của bạn:

import React from "react";
import { useUrlSearchParams } from "use-url-search-params";

const MyComponent = () => {
  const [params, setParams] = useUrlSearchParams()
  return (
    <div>
      __firebase_request_key: {params.__firebase_request_key}
    </div>
  )
}

this.props.params.your_param_name sẽ làm việc.

Đây là cách để lấy thông số từ chuỗi truy vấn của bạn.
Hãy làm console.log(this.props);để khám phá tất cả các khả năng.

Trong thành phần mà bạn cần truy cập các tham số bạn có thể sử dụng

this.props.location.state.from.search

sẽ tiết lộ toàn bộ chuỗi truy vấn (mọi thứ sau ?dấu hiệu)

Nói rằng có một url như sau

http: // localhost: 3000 / gọi lại? code = 6c3c9b39-de2f-3bf4-a542-3e77a64d3341

Nếu chúng tôi muốn trích xuất mã từ URL đó, phương pháp bên dưới sẽ hoạt động.

const authResult = new URLSearchParams(window.location.search); 
const code = authResult.get('code')

Trong React Router v4 chỉ withRoute là cách chính xác

Bạn có thể có quyền truy cập vào các thuộc tính của đối tượng lịch sử và kết quả khớp gần nhất thông qua thành phần bậc cao với withRouter. withRouter sẽ chuyển các đạo cụ trận đấu, vị trí và lịch sử được cập nhật cho thành phần được bao bọc bất cứ khi nào nó hiển thị.

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>You are now at {location.pathname}</div>
    )
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation)

https://reacttraining.com/react-router/web/api/withRouter

Tôi đã sử dụng một gói bên ngoài được gọi là chuỗi truy vấn để phân tích tham số url như vậy.

import React, {Component} from 'react'
import { parse } from 'query-string';

resetPass() {
    const {password} = this.state;
    this.setState({fetching: true, error: undefined});
    const query = parse(location.search);
    return fetch(settings.urls.update_password, {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'Authorization': query.token},
        mode: 'cors',
        body: JSON.stringify({password})
    })
        .then(response=>response.json())
        .then(json=>{
            if (json.error)
                throw Error(json.error.message || 'Unknown fetch error');
            this.setState({fetching: false, error: undefined, changePassword: true});
        })
        .catch(error=>this.setState({fetching: false, error: error.message}));
}

Khi bạn làm việc với phản ứng đường dom thì sẽ làm trống đối tượng cho phù hợp nhưng nếu bạn thực hiện đoạn mã sau thì nó sẽ cho thành phần es6 cũng như nó hoạt động trực tiếp cho thành phần chức năng

import { Switch, Route, Link } from "react-router-dom";

<Route path="/profile" exact component={SelectProfile} />
<Route
  path="/profile/:profileId"
  render={props => {
    return <Profile {...props} loading={this.state.loading} />;
  }}
/>
</Switch>
</div>

Bằng cách này bạn có thể nhận được đạo cụ và kết hợp thông số và id hồ sơ

Điều này làm việc cho tôi sau rất nhiều nghiên cứu về thành phần es6.

Hoặc có lẽ một cái gì đó như thế này?

let win = {
  'location': {
    'path': 'http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla'
  }
}
if (win.location.path.match('__firebase_request_key').length) {
  let key = win.location.path.split('__firebase_request_key=')[1]
  console.log(key)
}

Bạn có thể tạo móc đơn giản để trích xuất thông số tìm kiếm từ vị trí hiện tại:

import React from 'react';
import { useLocation } from 'react-router-dom';

export function useSearchParams<ParamNames extends string[]>(...parameterNames: ParamNames): Record<ParamNames[number], string | null> {
    const { search } = useLocation();
    return React.useMemo(() => { // recalculate only when 'search' or arguments changed
        const searchParams = new URLSearchParams(search);
        return parameterNames.reduce((accumulator, parameterName: ParamNames[number]) => {
            accumulator[ parameterName ] = searchParams.get(parameterName);
            return accumulator;
        }, {} as Record<ParamNames[number], string | null>);
    }, [ search, parameterNames.join(',') ]); // join for sake of reducing array of strings to simple, comparable string
}

sau đó bạn có thể sử dụng nó bên trong thành phần chức năng của bạn như thế này:

// current url: http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla
const { __firebase_request_key } = useSearchParams('__firebase_request_key');

// current url: http://localhost:3000/home?b=value
const searchParams = useSearchParameters('a', 'b'); // {a: null, b: 'value'}

export class ClassName extends Component{
      constructor(props){
        super(props);
        this.state = {
          id:parseInt(props.match.params.id,10)
        }
    }
     render(){
        return(
          //Code
          {this.state.id}
        );
}

let data = new FormData();
data.append('file', values.file);

Giải pháp đơn giản nhất!

trong định tuyến:

   <Route path="/app/someUrl/:id" exact component={binder} />

trong mã phản ứng:

componentDidMount() {
    var id = window.location.href.split('/')[window.location.href.split('/').length - 1];
    var queryString = "http://url/api/controller/" + id
    $.getJSON(queryString)
      .then(res => {
        this.setState({ data: res });
      });
  }