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

react router params and render

Trinix answered on October 11, 2021 Popularity 10/10 Helpfulness 2/10

answer react router params and render

related react route param

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 react-router render

Link to this answer
Share Copy Link

Contributed on Oct 11 2021

Trinix

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 router params and render

Contents

More Related Answers

react router params and render

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.