Есть приложение реагирования с маршрутизацией и маршрутами выдает ошибку при обновлении. В чем может быть причина? - PullRequest
Новая
       5

Есть приложение реагирования с маршрутизацией и маршрутами выдает ошибку при обновлении. В чем может быть причина?

0 голосов
/ 06 февраля 2019

У меня есть атрибут маршрутизации в моем приложении Reaction.js.когда я нажимаю на маршрут в первый раз, он работает нормально, но если я обновляю страницу, он выдает ошибку, говоря, что не может прочитать свойство ... нуля.Я делаю вызов API от tmdb.Почему я получаю ошибку при обновлении?Во-вторых, у меня есть другой маршрут, к которому я не могу получить доступ, если он не указан выше первого, который я упомянул.Я имею в виду, когда я помещаю TvInfo выше MovieInfo, tvinfo works информация о фильме не делает.Таким образом, работает только movieinfo.Если я сначала щелкну вышеупомянутые элементы маршрута, а затем щелкну элемент tvinfo, я снова получу предыдущий фильм на экране.В чем может быть проблема, я попробовал много вещей?спасибо 

import React,{ Component } from 'react';
import Home from './components/Home';
import MovieInfo from './components/MovieInfo';
import TvInfo from './components/TvInfo';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

class App extends Component {
render(){
return(
  <BrowserRouter>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/:movie_id" component={MovieInfo} />
      <Route path="/:tv_id" component={TvInfo} />
    </Switch>
  </BrowserRouter>

 )
}
}


export default App;

Ответы [ 2 ]

0 голосов
/ 07 февраля 2019

это мой компонент movieInfo 

class MovieInfo extends React.Component{

 render(){


 return(
  <div>
    <p style={{marginLeft:'47%',fontSize:25}}>{this.props.selectedMovie.original_title}</p>
    <img  style={{marginLeft: '20%'}}
    src={`http://image.tmdb.org/t/p/w780${this.props.selectedMovie.backdrop_path}`} alt="moviebackdrop"/>
  <div style={{float:'right',marginRight:45}}>
    <p>Release Date: {this.props.selectedMovie.release_date}</p>
    <p>Vote: {this.props.selectedMovie.vote_average}<Icon name="star" color="yellow" /></p>
  </div>
    <p style={{width:800,marginLeft: '20%'}} >{this.props.selectedMovie.overview}</p>
    <p>{this.props.data.homepage}</p>
  </div>
)}
}

const mapStateToProps = (state) => {
return{
selectedMovie:state.movie.selectedMovie,
 }
}

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

 selectMovie = () => {
 this.props.setMovie(this.props.movie)
 }


render(){
return(
<Link to={"movie/" + this.props.movie.id}>
  <div onClick={() => this.selectMovie()}>
    <div className="item">
      <img className="img"
      src={`http://image.tmdb.org/t/p/w342${this.props.movie.backdrop_path}`} alt="moviebackdrop"/>
      <p className="title">{this.props.movie.original_title}</p>
      <p className="overview">{this.props.movie.overview}</p>
    </div>
  </div>
</Link>
)}
}
0 голосов
/ 06 февраля 2019

Вам необходимо разработать свои маршруты немного по-другому, компонент Route не может различать два отдельных параметра.

class App extends Component {
    render(){
        return(
          <BrowserRouter>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="movie/:movie_id" component={MovieInfo} />
              <Route path="tv/:tv_id" component={TvInfo} />
            </Switch>
          </BrowserRouter>
        )
    }
}

export default App;
...