在同一页面上进行React Router组件渲染

Question

我是新来的路由器响应者，我正在尝试将该组件呈现到新页面，当前它更新了我的DOM并将路由器组件放在页面顶部。我希望它导航到新页面

当我单击图像时，它将渲染该组件

import React, { Component } from 'react'

class ItemDetails extends Component {
  render () {
    return <h1>Test</h1>
  }
}

export default ItemDetails

来自

   const headerImages = (props) => {
  const imageResults = props.trending.slice(0, 5).map(r => ( // Grab firt 5 array objects
    <Link key={r.id} to={`/details/${r.id}`}>
      <div key={r.id}>
        <img key={r.id} src={`https://image.tmdb.org/t/p/w1280${r.backdrop_path}`} alt={r.title} className='header-image' />
        <h1 className='now-playing'>Latest</h1>
        <h1 className='header-title'>{r.title}</h1>
        <h4 className='header-details'>{r.overview}</h4>
      </div>
    </Link>
  ))
  return <div className='header-images'>
    <Carousel infinite autoPlay={4500}>{imageResults}</Carousel>
  </div>
}

这是app.js代码

 <BrowserRouter>
        <div className='App'>
          <Switch>
            {/* <Route path="/" exact component={Home} /> */}
            <Route exact path="/details/:id" component={ItemDetails} />
          </Switch>
</div>