Question

我目前正努力在单击组件后显示详细信息页面，我现在正在观看此视频：https://www.youtube.com/watch?v=WzX0zNAgScA&list=PLcCp4mjO-z9_4Wak3Uq8dEWC6H1fbSNgL&index=3 11:30左右，您可以看到他如何显示他的详细信息页面，但是没有似乎为我工作

所以我一遍又一遍地检查了他的代码，并且断言它与我的代码完全相同（变量名ofc除外），我实际上是花了一个多小时来查找我的错误，但是我无法似乎发现了什么（我可能是盲人/愚蠢的）：

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>

由于某种原因，在路由的末尾，“ match.params.packageId”似乎不起作用。它保持未定义状态，但是当我在其中写一个数字（也称为ID）时，ShowPackage页面确实起作用。有人知道这可能是什么吗？我也要放ShowPackage代码

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>

Answer 1

传递ID，起点，终点等，以便链接。

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

在这样的导航组件中访问。

this.props.location

反应路由问题（通过参数传递ID）

1 个答案: