如何使用路由传递项目的详细信息答案

【问题标题】：how to pass pass details of item using routes如何使用路由传递项目的详细信息
【发布时间】：2020-12-01 17:50:50
【问题描述】：

我从 API 获取了一个曲目列表，当我点击曲目名称时，我必须被重定向到显示当前曲目描述的详细信息页面。

这是我获取数据并显示在列表中的组件。

const TrackList = () => {
    const url = `http://ws.audioscrobbler.com/2.0/?method=chart.gettoptracks&api_key=key=json`
    const [trackList, setTrackList]  = useState([])
    useEffect(() => {
        loadData()
    }, [])

    const loadData = async () => {
            const res = await fetch(url)
            const data = await res.json()
            setTrackList(data.tracks.track)
            console.log(data.tracks.track)
    }
    return (
        <div>
           <Container>
              <h1 className='mb-5 mt-5'>Top TrackList</h1>
             
                {trackList.map(item => {
                    return (
                        
                        <Row className='mt-1' style={{padding: '5px', border: '1px solid #000', display: 'flex', justifyContent: 'flex-start', alignItems: 'center'}}>
                        <Col lg={1} md={1} sm={1}>
                        <a href={item.artist.url}><img src={item.image[1]['#text']} /></a>
                            
                        </Col>
                        <Col lg={11} md={11} sm={11}>
                     
                        <Link to='/:mbid'><h6>{item.artist.name}</h6></Link>
                        <p>"{item.name}"</p>
                        </Col>
                        </Row>
                       
                    )
                })}
          
          </Container>
        </div>
    )
}

在这里我创建了详细信息页面，其中必须显示主要信息：

const TrackListDetails = () => {
    console.log('props', this.props.match.mbid)
    return (
        <Container>

        </Container>
        
    )
}

但是我在 App.js 中使用的路由我说的对吗？

function App() {

  return (
    <div>
   <Router>
        <NavBar />
        <Route path="/" component={TrackList}/>
        <Route path="/details/:mbid" component={TrackListDetails}/>
    </Router>
    </div>
  );
}

【问题讨论】：

使用this.props.match.params.mbid 而不是this.props.match.mbid 来从组件内的 URL 访问 mbid。

标签： reactjs url react-router react-hooks fetch

【解决方案1】：

如react router documentation 中所述，您可以将 state 属性传递给链接元素

<Link
  to={{
    pathname: "/courses",
    state: { description: 'some description' }
  }}
/>

您可以像这样在详细信息页面中使用它：

const { state } = useLocation();
const { description } = state;

但问题是您必须在用户重新加载页面时保留描述。这就是为什么我建议在挂载详细信息页面时获取轨道详细信息。

【讨论】：