Блог

Я извлек данные из API, НО теперь при нажатии на имя исполнителя отображается страница сведений. просто, когда я перезагружаю страницу, подробная информация мигает, перезаписывается и исчезает

Я решил извлечь App.js компонент, buid направляет туда и передает реквизиты дочерним компонентам

     function App() {
  const url = `http://ws.audioscrobbler.com/2.0/?method=chart.gettoptracksamp;api_key=KEYamp;format=json`
    const [trackList, setTrackList]  = useState([])
    useEffect(() => {
        loadData()
    }, [])
    const history = createMemoryHistory()
    const loadData = async () => {
            const res = await fetch(url)
            const data = await res.json()
            setTrackList(data.tracks.track)
            console.log(data.tracks.track)
    }
  return (
    <div>
   <Router>
        <NavBar />
        <Route path="/" render={(props) => <TrackList trackList={trackList} />}/>
        <Route path="/artist/:name" render={(props) => <TrackListDetails trackList={trackList} />} />      
   </Router>
    </div>
  );
}
 

В компоненте TrackList я отображаю данные с использованием реквизитов.
const список дорожек = ({Список дорожек}) => {

     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={`/artist/${item.artist.name}`}><h6>{item.artist.name}</h6></Link>
                        <p>"{item.name}"</p>
                        </Col>
                        </Row>
                       

                    )
                })}
                             
          </Container>
        </div>
    )
}
 

И в деталях отображается информация о компоненте. секунда и перенаправляет главную страницу со списком треков

 const TrackListDetails = ({ trackList }) => {
    const { name } = useParams();

    const history = useHistory();
    const location = useLocation();

        const targetArtist = trackList.find(item => item.name === name);
        console.log('props', name)
    
     
    return (
        <Container>
            <Row>
                <Col>
            
                    <h4>Singer name: </h4>
                
                                <h1>{name}</h1>
             
            
                  
                    <h4>Description </h4>
                </Col>
            </Row>
            <Row>
            <button onClick={() => history.goBack() } >Go to home</button>
            </Row>
        </Container>
        
    )
}
 

Глупая ошибка OMG. все работает. просто нужно было добавить точное значение в маршрут!

  <Router>
     
        <NavBar />
        
        <Route exact path="/" render={(props) => <TrackList trackList={trackList} />}/>
        <Route exact path="/artist/:name" render={(props) => <TrackListDetails trackList={trackList} />} />      
   </Router>
 

Теперь он работает правильно!