无法读取未定义反应挂钩的属性“位置”答案

【问题标题】：Can't read property 'location' of undefined react hooks无法读取未定义反应挂钩的属性“位置”
【发布时间】：2021-03-14 17:38:07
【问题描述】：

我已从 API 获取数据，但现在单击艺术家姓名时会显示详细信息页面。就在我重新加载页面时，详细信息会闪烁并重新呈现并消失

我决定在 App.js 组件中获取，在那里构建路由并将 props 传递给子组件

    function App() {
  const url = `http://ws.audioscrobbler.com/2.0/?method=chart.gettoptracks&api_key=KEY&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 组件中，我使用道具显示数据。常量 TrackList = ({trackList}) => {

    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>
    )
}

并在详细信息中显示组件信息。 a sec 并用 tracklist 重新渲染主页

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>
        
    )
}

【问题讨论】：

标签： reactjs api routes react-router react-hooks

【解决方案1】：

OMG 愚蠢的错误。一切正常。只需将确切添加到 Route ！

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

现在它可以正常工作了！

【讨论】：