react js router parameters

Healthy Hummingbird answered on February 11, 2021 Popularity 10/10 Helpfulness 6/10

answer react js router parameters

related react route param

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 parameters router

Link to this answer
Share Copy Link

Contributed on Feb 11 2021

Healthy Hummingbird

0 Answers Avg Quality 2/10

Closely Related Answers

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 para

Link to this answer
Share Copy Link

Contributed on Feb 27 2023

Prickly Pony

0 Answers Avg Quality 2/10

react js router parameters

Contents

More Related Answers

react js router parameters

Closely Related Answers

react route param

Grepper

Documentation

Social

Legal

Contact

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