Geef rekwisieten door in Link react-router

Antwoord 2, autoriteit 84%

er is een manier waarop u meer dan één parameter kunt doorgeven. Je kunt “to” doorgeven als object in plaats van string.

// your route setup
<Route path="/category/:catId" component={Category} / >
// your link creation
const newTo = { 
  pathname: "/category/595212758daa6810cbba4104", 
  param1: "Par1" 
};
// link to the "location"
// see (https://reacttraining.com/react-router/web/api/location)
<Link to={newTo}> </Link>
// In your Category Component, you can access the data like this
this.props.match.params.catId // this is 595212758daa6810cbba4104 
this.props.location.param1 // this is Par1

Antwoord 3, autoriteit 21%

Ik had hetzelfde probleem om een ​​gebruikersdetail van mijn applicatie te tonen.

U kunt dit doen:

<Link to={'/ideas/'+this.props.testvalue }>Create Idea</Link>

of

<Link to="ideas/hello">Create Idea</Link>

en

<Route name="ideas/:value" handler={CreateIdeaView} />

om dit te verkrijgen via this.props.match.params.valuein je CreateIdeaView-klasse.

Je kunt deze video bekijken die me veel heeft geholpen: https://www.youtube.com /watch?v=ZBxMljq9GSE

Antwoord 4, autoriteit 19%

Zie dit bericht ter referentie

Het simpele is dat:

<Link to={{
     pathname: `your/location`,
     state: {send anything from here}
}}

Nu wil je er toegang toe hebben:

this.props.location.state

Antwoord 5, autoriteit 12%

zoals voor react-router-dom 4.xx (https://www.npmjs .com/package/react-router-dom) u kunt parameters doorgeven aan de component waarnaar moet worden gerouteerd via:

<Route path="/ideas/:value" component ={CreateIdeaView} />

linken via (aangezien testValue prop wordt doorgegeven aan de overeenkomstige component (bijv. de bovenstaande app-component) waardoor de link wordt weergegeven)

<Link to={`/ideas/${ this.props.testValue }`}>Create Idea</Link>

props doorgeven aan uw componentconstructor, de waardeparameter zal beschikbaar zijn via

props.match.params.value

Antwoord 6, autoriteit 8%

Na installatie van react-router-dom

<Link
    to={{
      pathname: "/product-detail",
      productdetailProps: {
       productdetail: "I M passed From Props"
      }
   }}>
    Click To Pass Props
</Link>

en andere kant waar de route wordt omgeleid, doe dit

componentDidMount() {
            console.log("product props is", this.props.location.productdetailProps);
          }

Antwoord 7

Route:

<Route state={this.state} exact path="/customers/:id" render={(props) => <PageCustomer {...props} state={this.state} />} />

En dan heb je als volgt toegang tot params in je PageCustomer-component: this.props.match.params.id.

Bijvoorbeeld een api-aanroep in de component PageCustomer:

axios({
   method: 'get',
   url: '/api/customers/' + this.props.match.params.id,
   data: {},
   headers: {'X-Requested-With': 'XMLHttpRequest'}
 })

Antwoord 8

Update 25-11-21
Bedankt voor alex-adestech.mx die hierboven schreef.
Ik heb het hele object kunnen overbrengen en alle benodigde velden eruit kunnen halen
in verzendcomponent :

<Button type="submit" component={NavLink} to={{
        pathname: '/basequestion',
        state: {question} }}
        variant="contained"
        size="small">Take test</Button>

in ontvangstcomponent:

import { useLocation } from "react-router"
const BaseQuestion = () => {
const location = useLocation();
const {description, title, images} = (location.state.question);

Antwoord 9

Ik worstelde hier een paar uur mee en geen enkel antwoord in dit onderwerp werkte voor mij. Eindelijk heb ik een oplossing voor React Router 6 gevonden in de documentatie.

Hier is een volledig voorbeeld:

// App.js
<BrowserRouter>
    <Routes>
        <Route path="/books/:bookId" element={ <BookDetails /> } />
    </Routes>
</BrowserRouter>

// BookDetails.js
import React from "react"
import { useParams } from "react-router-dom"
export default function BookPage() {
    const params = useParams()
    return <div> { console.log(params.bookId) } </div>
}

Houd er rekening mee dat useParamsniet kan worden aangeroepen binnen een klassecomponent, dus u moet de functiecomponent gebruiken (zie ditantwoord voor details).