CODEWITHSUNDEEP
reactjsreact-router
Siox
Siox

Reputation: 41

React routing problem (passing ID via params)

I'm currently struggling with showing a detail page after clicking a component, I'm following this video right now: https://www.youtube.com/watch?v=WzX0zNAgScA&list=PLcCp4mjO-z9_4Wak3Uq8dEWC6H1fbSNgL&index=3 Around 11:30 you can see how he shows his detail page, but that does not seem to work for me

So I've check his code over and over again and afaik it's exactly the same as my code (except for the variable names ofc), I'm literally trying for over an hour to find my error but I can't seem to find anything (I might be blind/stupid):

import React, {Fragment} from 'react';
import {Link, Route} from 'react-router-dom';
import ShowPackage from './ShowPackage'

export default ({ match: { url }, packages }) =>
<Fragment>
    <ul>
        {packages.map(({ id, origin, destination, status, type, date }) =>
            <li key={id}>
                <p>{id}</p>
                <p>{origin} -> {destination}</p>
                <p>{status}</p>
                <p>{type}</p>
                <p>{date.substring(0,10)}</p>
                <Link to={`${url}/${id}`}>Detail</Link>
            </li>
            )}
    </ul>

<Route path={`${url}/:packageId`} render={
    ({ match }) => <ShowPackage {...packages.find(pack => pack.id === match.params.packageId)}/>
    }/>
</Fragment>

For some reason at the end of the route the "match.params.packageId" does not seem to work.. It stays undefined, but the ShowPackage page does work when I just write a number (aka ID) there.. Anyone knows what this could be? I'll just put the ShowPackage code too

import React, {Fragment} from 'react';

export default ({ match, id, trackingnumber, description, length, height, width, weight, origin, destination, status, type, date, email }) =>
console.log(match) ||
<Fragment>
    <div>
        {id}
        {trackingnumber}
        {description}
        {length}
        {height}
        {width}
        {weight}
        {origin}
        {destination}
        {status}
        {type}
        {email}
        {date}
    </div>
</Fragment>

Upvotes: 1

Views: 128

Answers (1)

akhtarvahid
akhtarvahid

Reputation: 9769

Pass id, origin, destination...etc like this to Link.

<Link to ={{
    pathname: {`${url}/${id}`}, 
    state: { 
        _id: id, 
        _origin: origin, 
        _destination:destination,
        _status: status,
        _type: type,
        _date: date 
    }
   }}>Detail</Link>

And in the navigated component access like this.

this.props.location

Upvotes: 1

Related Questions