React Router Компонент рендеринга на той же странице - PullRequest
Новая
       11

React Router Компонент рендеринга на той же странице

0 голосов
/ 14 декабря 2018

Я новичок в реагировании на маршрутизатор, и я пытаюсь заставить этот компонент отображаться на новой странице, в настоящее время он обновляет мой DOM и помещает мой компонент маршрутизатора в верхнюю часть моей страницы.Я хочу, чтобы перейти на новую страницу

enter image description here

enter image description here

Когда я нажимаю на изображениеон рендерит этот компонент 

import React, { Component } from 'react'

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

export default ItemDetails

From 

   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>
...