无法读取未定义的react挂钩的属性“location”

Question

我已经从API中提取了数据，但当我单击艺术家名称时，现在会显示详细信息页面。就在我重新加载页面时，detials信息会闪烁并重新显示，然后消失

我决定获取App.js组件，在那里建立路线并将道具传递给子组件

    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组件中，我使用props显示数据。const 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>
    )
}

AND在详细信息组件信息显示为。一秒并重新渲染带有跟踪列表的主页

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

Answer 1

天哪，愚蠢的错误。一切正常。只需将精确添加到路线！

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

现在它工作正常了！