React - วิธีรับค่าพารามิเตอร์จากสตริงการสืบค้น

ฉันจะกำหนดเส้นทางในไฟล์ route.jsx ของฉันเพื่อจับ__firebase_request_keyค่าพารามิเตอร์จาก URL ที่สร้างโดยกระบวนการลงชื่อเพียงครั้งเดียวของ Twitter หลังจากที่เปลี่ยนเส้นทางจากเซิร์ฟเวอร์ได้อย่างไร

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

ฉันพยายามกำหนดค่าเส้นทางต่อไปนี้ แต่:redirectParamไม่พบพารามิเตอร์ที่กล่าวถึง:

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

ทำปฏิกิริยาเราเตอร์ v3

React Router จะแยกวิเคราะห์ตำแหน่งของคุณแล้วส่งไปยังRouteComponentของคุณเป็นอุปกรณ์ประกอบฉาก คุณสามารถเข้าถึงแบบสอบถาม (หลังจาก? ใน URL) ส่วนผ่าน

this.props.location.query.__firebase_request_key

หากคุณกำลังมองหาค่าพารามิเตอร์พา ธ คั่นด้วยเครื่องหมายโคลอน (:) ภายในเราเตอร์จะสามารถเข้าถึงได้ผ่านเหล่านี้

this.props.match.params.redirectParam

สิ่งนี้ใช้กับเวอร์ชันของ React Router v3 ที่ล่าช้า (ไม่แน่ใจว่ารุ่นใด) this.props.params.redirectParamเราเตอร์รุ่นเก่าที่ได้รับรายงานการใช้

React Router v4 และ React Router v5 ทั่วไป

React Router v4 ไม่ได้แยกวิเคราะห์แบบสอบถามสำหรับคุณอีกต่อไป แต่คุณสามารถเข้าถึงได้ผ่านทางthis.props.location.searchเท่านั้น สำหรับเหตุผลที่เห็นคำตอบของ nbeuchat

เช่นนำเข้าไลบรารีqsเท่าที่qsคุณจะทำได้

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

ห้องสมุดอีกก็จะสตริงแบบสอบถาม ดูคำตอบนี้สำหรับแนวคิดเพิ่มเติมเกี่ยวกับการแยกวิเคราะห์สตริงการค้นหา หากคุณไม่ต้องการความเข้ากันได้กับ IEคุณสามารถใช้

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

สำหรับส่วนประกอบการทำงานคุณจะเข้ามาแทนที่this.props.locationด้วยเบ็ดuseLocation หมายเหตุคุณสามารถใช้งานwindow.location.searchได้ แต่สิ่งนี้จะไม่อนุญาตให้ทริกเกอร์การแสดงผลซ้ำจากการเปลี่ยนแปลง หากองค์ประกอบ (ไม่สามารถใช้งานได้) ของคุณไม่ได้เป็นลูกโดยตรงของSwitchคุณจำเป็นต้องใช้withRouterเพื่อเข้าถึงอุปกรณ์เราเตอร์ที่มีให้

ทั่วไป

ข้อเสนอแนะของ nizam.sp ที่ต้องทำ

console.log(this.props)

จะเป็นประโยชน์ในกรณีใด ๆ

ทำปฏิกิริยาเราเตอร์ v4

การใช้ component

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

this.props.match.params.id

ส่วนประกอบจะแสดงผลโดยอัตโนมัติด้วยอุปกรณ์ประกอบเส้นทาง

การใช้ render

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

this.props.match.params.id

อุปกรณ์ประกอบเส้นทางถูกส่งผ่านไปยังฟังก์ชั่นการเรนเดอร์

ทำปฏิกิริยาเราเตอร์ v3

ด้วย React Router v3 คุณสามารถรับข้อความค้นหาจากthis.props.location.search(? qs1 = naisarg & qs2 = parmar) ตัวอย่างเช่นด้วยlet params = queryString.parse(this.props.location.search)จะให้{ qs1 : 'naisarg', qs2 : 'parmar'}

ทำปฏิกิริยาเราเตอร์ v4

ด้วย React Router v4 this.props.location.queryจะไม่มีอีกต่อไป คุณจำเป็นต้องใช้แทนและแยกพารามิเตอร์การค้นหาทั้งโดยตัวคุณเองหรือใช้แพคเกจที่มีอยู่เช่นthis.props.location.searchquery-string

ตัวอย่าง

นี่คือตัวอย่างเล็กน้อยที่ใช้ React Router v4 และquery-stringไลบรารี่

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

มีเหตุผล

เหตุผลของทีมเราเตอร์ React ในการลบqueryคุณสมบัติคือ:

มีแพ็คเกจยอดนิยมจำนวนมากที่ทำการแยกวิเคราะห์สตริง / ค้นหาสตริงแตกต่างกันเล็กน้อยและความแตกต่างแต่ละอย่างอาจเป็นวิธี "ถูกต้อง" สำหรับผู้ใช้บางรายและ "ไม่ถูกต้อง" สำหรับผู้อื่น ถ้าเราท์เตอร์ React เลือก "ขวา" มันจะเหมาะสำหรับบางคนเท่านั้น จากนั้นจะต้องเพิ่มวิธีสำหรับผู้ใช้รายอื่นเพื่อแทนที่ในแพ็คเกจการแยกวิเคราะห์คิวรีที่ต้องการ ไม่มีการใช้สตริงการค้นหาภายในโดย React Router ที่ต้องการให้วิเคราะห์คู่คีย์ - ค่าดังนั้นจึงไม่จำเป็นต้องเลือกว่าหนึ่งในนั้นควรเป็น "ถูกต้อง"

[ ... ]

วิธีการที่ใช้สำหรับ 4.0 คือการแยกคุณสมบัติ "รวมแบตเตอรี่" ทั้งหมดและกลับไปที่การกำหนดเส้นทางพื้นฐาน หากคุณต้องการแยกวิเคราะห์สตริงหรือการโหลด async หรือการรวม Redux หรือสิ่งอื่นที่เฉพาะเจาะจงมากคุณสามารถเพิ่มสิ่งนั้นเข้ากับไลบรารีเฉพาะสำหรับกรณีการใช้งานของคุณ cruft น้อยลงบรรจุในที่คุณไม่ต้องการและคุณสามารถปรับแต่งสิ่งต่าง ๆ ตามความต้องการและความต้องการเฉพาะของคุณ

คุณสามารถค้นหาการสนทนาแบบเต็มบนGitHub

เท่าที่ฉันรู้มีสามวิธีที่คุณสามารถทำได้

1. ใช้นิพจน์ทั่วไปเพื่อรับสตริงข้อความค้นหา

2. คุณสามารถใช้เบราว์เซอร์ API ภาพ url ปัจจุบันเป็นเช่นนี้:

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

เราแค่อยากได้ 123;

เป็นครั้งแรก

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

แล้วก็

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

3. ใช้ไลบรารีที่สามที่เรียกว่า 'query-string' ก่อนติดตั้ง

npm i query-string

จากนั้นนำเข้าไฟล์ javascript ปัจจุบัน:

 import queryString from 'query-string'

ขั้นตอนถัดไปคือรับ 'โทเค็น' ใน URL ปัจจุบันให้ทำดังนี้:

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

หวังว่ามันจะช่วย

อัปเดตเมื่อ 25/02/2019

4. หาก URL ปัจจุบันดูเหมือนว่าต่อไปนี้:

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

เรากำหนดฟังก์ชันเพื่อรับพารามิเตอร์:

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

เราสามารถรับ 'ความช่วยเหลือ' โดย:

getQueryVariable('aid') //160990

React Router v4 ไม่มี props.location.query วัตถุอีกต่อไป (ดูการสนทนาGitHub ) ดังนั้นคำตอบที่ได้รับการยอมรับจะไม่ทำงานสำหรับโครงการใหม่

วิธีแก้ปัญหาสำหรับ v4 คือการใช้ library query-stringเพื่อแยกวิเคราะห์props.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'}

เมื่อใช้ React hooks จะไม่สามารถเข้าถึงthis.props.locationได้ ในการจับภาพพารามิเตอร์ URL ให้ใช้windowวัตถุ

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

ทำปฏิกิริยาเราเตอร์ v4

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

โปรดทราบว่าขณะนี้อยู่ระหว่างการทดลอง

ตรวจสอบความเข้ากันได้ของเบราว์เซอร์ที่นี่: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams#Browser_compatibility

คุณสามารถตรวจสอบ react-router ได้ง่าย ๆ คุณสามารถใช้รหัสเพื่อรับพารามิเตอร์การสืบค้นตราบเท่าที่คุณกำหนดไว้ในเราเตอร์ของคุณ:

this.props.params.userId

ตอบสนองเราเตอร์ 5.1+

5.1 แนะนำ hooks ต่าง ๆ เช่นuseLocationและuseParamsที่สามารถใช้ที่นี่

ตัวอย่าง:

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

ถ้าอย่างนั้นเรามาเยี่ยมชมพูด

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

คุณสามารถเรียกคืนได้เช่น

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

หากเราเตอร์ของคุณเป็นเช่นนี้

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

คุณจะได้รับรหัสเช่นนี้

this.props.match.params.id

ด้วยหนึ่งซับนี้คุณสามารถใช้งานได้ทุกที่ในทั้ง React Hook และ React Class Component ด้วย JavaScript ธรรมดา

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

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

หากคุณไม่ได้รับthis.props... คุณคาดหวังจากคำตอบอื่น ๆ คุณอาจต้องใช้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))

ฉันมีเวลายากที่จะแก้ไขปัญหานี้ หากไม่มีงานใด ๆ ข้างต้นคุณสามารถลองใช้งานได้แทน ฉันใช้แอป create-react-app

ความต้องการ

react-router-dom ":" ^ 4.3.1 "

สารละลาย

ที่ตำแหน่งที่ระบุเราเตอร์

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

เพิ่มชื่อพารามิเตอร์ที่คุณต้องการผ่านเช่นนี้

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

ที่หน้าซึ่งคุณกำลังแสดงผล / บางเส้นทางคุณสามารถระบุสิ่งนี้เพื่อดูชื่อพารามิเตอร์การโทร id เช่นนี้

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

ในตอนท้ายที่คุณส่งออกเริ่มต้น

export default withRouter(Component);

อย่าลืมรวมถึงการนำเข้า

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

เมื่อ console.log (this.props) คุณจะสามารถสิ่งที่ได้รับการลง มีความสุข!

React routerจาก v4 เป็นต้นไปไม่ได้ช่วยให้คุณquery paramsโดยตรงในของlocationวัตถุ เหตุผลที่เป็น

มีแพ็คเกจยอดนิยมจำนวนมากที่ทำการแยกวิเคราะห์สตริง / ค้นหาสตริงแตกต่างกันเล็กน้อยและความแตกต่างแต่ละอย่างอาจเป็นวิธี "ถูกต้อง" สำหรับผู้ใช้บางรายและ "ไม่ถูกต้อง" สำหรับผู้อื่น ถ้าเราท์เตอร์ React เลือก "ขวา" มันจะเหมาะสำหรับบางคนเท่านั้น จากนั้นจะต้องเพิ่มวิธีสำหรับผู้ใช้รายอื่นเพื่อแทนที่ในแพ็คเกจการแยกวิเคราะห์คิวรีที่ต้องการ ไม่มีการใช้สตริงการค้นหาภายในโดย React Router ที่ต้องการให้วิเคราะห์คู่คีย์ - ค่าดังนั้นจึงไม่จำเป็นต้องเลือกว่าหนึ่งในนั้นควรเป็น "ถูกต้อง"

การรวมที่นั้นมันจะทำให้รู้สึกมากกว่าที่จะแยกวิเคราะห์ location.search ในองค์ประกอบมุมมองของคุณที่คาดหวังวัตถุแบบสอบถาม

คุณสามารถทำได้โดยทั่วไปโดยการเอาชนะwithRouterจากสิ่งที่react-routerชอบ

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

อาจจะช้าไปหน่อย แต่ hook การตอบกลับนี้สามารถช่วยให้คุณรับ / ตั้งค่าในการสืบค้น URL: https://github.com/rudyhuynh/use-url-search-params (เขียนโดยฉัน)

มันทำงานได้ทั้งแบบมีหรือไม่มีreact-routerก็ได้ ด้านล่างคือตัวอย่างโค้ดในกรณีของคุณ:

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 จะทำงาน.

นี่คือวิธีรับพารามิเตอร์จากสตริงข้อความค้นหาของคุณ
โปรดทำconsole.log(this.props);เพื่อสำรวจความเป็นไปได้ทั้งหมด

ในองค์ประกอบที่คุณต้องการเข้าถึงพารามิเตอร์ที่คุณสามารถใช้ได้

this.props.location.state.from.search

ซึ่งจะเปิดเผยสตริงแบบสอบถามทั้งหมด (ทุกอย่างหลัง?เครื่องหมาย)

ใน React Router v4 เท่านั้น withRoute เป็นวิธีที่ถูกต้อง

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

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

ฉันใช้แพ็คเกจภายนอกที่เรียกว่า query-string เพื่อวิเคราะห์พารามิเตอร์ url อย่างนั้น

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

เมื่อคุณทำงานกับ react route dom จากนั้นจะว่างเปล่าวัตถุสำหรับการจับคู่ แต่ถ้าคุณทำรหัสต่อไปนี้ก็จะสำหรับองค์ประกอบ es6 เช่นเดียวกับมันทำงานได้โดยตรงสำหรับองค์ประกอบฟังก์ชั่น

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>

วิธีนี้คุณจะได้รับอุปกรณ์ประกอบฉากและจับคู่พารามิเตอร์และรหัสโปรไฟล์

สิ่งนี้ใช้ได้กับฉันหลังจากทำการวิจัยเกี่ยวกับองค์ประกอบ es6 เป็นจำนวนมาก

บอกว่ามี URL ดังนี้

http: // localhost: 3000 / โทรกลับรหัส = 6c3c9b39-de2f-3bf4-a542-3e77a64d3341

หากเราต้องการแยกรหัสจาก URL นั้นวิธีการด้านล่างจะใช้ได้

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

หรือบางทีสิ่งนี้

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

คุณสามารถสร้าง hook แบบง่ายสำหรับการแยกพารามิเตอร์การค้นหาจากตำแหน่งปัจจุบัน:

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
}

จากนั้นคุณสามารถใช้ภายในองค์ประกอบการทำงานของคุณเช่นนี้

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

ทางออกที่ง่ายที่สุด!

ในการกำหนดเส้นทาง:

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

ในรหัสตอบสนอง:

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