how to pass pass details of item using routes - reactjs

Question

I've fetched a tracklist from API and when I click on the track name I have to be redirected to Details page where description of current track is displayed.
This is component where I fetch data and display in the list.
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>
)
}
Here I created Details page where main info has to be displayed :
const TrackListDetails = () => {
console.log('props', this.props.match.mbid)
return (
<Container>
</Container>
)
}
But Routes I used in App.js
Am I right ?
function App() {
return (
<div>
<Router>
<NavBar />
<Route path="/" component={TrackList}/>
<Route path="/details/:mbid" component={TrackListDetails}/>
</Router>
</div>
);
}

Answer 1

As stated in react router documentation you can pass state property to link element
<Link
to={{
pathname: "/courses",
state: { description: 'some description' }
}}
/>
You can use it in details page like this:
const { state } = useLocation();
const { description } = state;
But the problem is that you have to persist description when user reloads page. That's why I recommend fetching track details when details page is mounted.