Breaking News: Grepper is joining You.com. Read the official announcement!

react route param

Add Answer

Prickly Pony answered on December 12, 2019 Popularity 10/10 Helpfulness 2/10

answer react route param

related how to know the params with react router

related react js router parameters

related react get route params

related react router params and render

react route param

Comment

----create the route that will point to the deatilsPage---
<Route path="/path/:id" element={<DeatialsPage />}
import React from "react"
import { Link } from "react-router-dom"

export default function Vans() {
    const [vans, setVans] = React.useState([])
    React.useEffect(() => {
        fetch("/api/vans")
            .then(res => res.json())
            .then(data => setVans(data.vans))
    }, [])

    const vanElements = vans.map(van => (
        <div key={van.id} className="van-tile">
        ----observe the link it has an id param----
            <Link to={`/vans/${van.id}`}>
                <img src={van.imageUrl} />
                <div className="van-info">
                    <h3>{van.name}</h3>
                    <p>${van.price}<span>/day</span></p>
                </div>
                <i className={`van-type ${van.type} selected`}>{van.type}</i>
            </Link>
        </div>
    ))

    return (
        <div className="van-list-container">
            <h1>Explore our van options</h1>
            <div className="van-list">
                {vanElements}
            </div>
        </div>
    )
}
---example of deatials page
import React from "react"
import { useParams } from "react-router-dom"

export default function VanDetail() {
    const params = useParams()
    const [van, setVan] = React.useState(null)
    
--fetching the needed products---
    React.useEffect(() => {
        fetch(`/api/vans/${params.id}`)
            .then(res => res.json())
            .then(data => setVan(data.vans))
    }, [params.id])

    return (
        <div className="van-detail-container">
            {van ? (
                <div className="van-detail">
                    <img src={
                    van.imageUrl} />
                    <i className={`van-type ${van.type} selected`}>{van.type}</i>
                    <h2>{van.name}</h2>
                    <p className="van-price"><span>${van.price}</span>/day</p>
                    <p>{van.description}</p>
                     <button className="link-button">Rent this van</button>
                </div>
            ) : <h2>Loading...</h2>}
        </div>
    )
}

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: param whatever

Link to this answer
Share Copy Link

Contributed on Feb 27 2023

Prickly Pony

0 Answers Avg Quality 2/10

Closely Related Answers

how to know the params with react router

Comment

//...
import { useParams } from 'react-router-dom'

function Profile () {
  // params is an object that contains the params of the URL
  const params = useParams()

  //...
}

Popularity 10/10 Helpfulness 7/10 Language javascript

Source: ui.dev

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Dec 02 2022

Grotesque Gnu

0 Answers Avg Quality 2/10

react js router parameters

Comment

// Declaramos la ruta
<Route path="/thanks/:status" component={ThanksPage} />
// Obtenemos la variable
import { useParams } from "react-router-dom";

const { status } = useParams();

Popularity 10/10 Helpfulness 6/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Feb 11 2021

Healthy Hummingbird

0 Answers Avg Quality 2/10

react get route params

Comment

const Child = ({ match }) => (
  <div>
    <h3>ID: {match.params.id}</h3>
  </div>
)

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: get

Link to this answer
Share Copy Link

Contributed on Dec 12 2019

Itchy Iguana

0 Answers Avg Quality 2/10

react router params and render

Comment

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

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Oct 11 2021

Trinix

0 Answers Avg Quality 2/10

react route param

Contents

More Related Answers

react route param

Closely Related Answers

how to know the params with react router

react js router parameters

react get route params

react router params and render

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.