Реагировать на перенаправление маршрутизатора на основе ответа API

Question

Я использую многопользовательский поиск tmdb, у меня есть запрос get, который возвращает массив элементов, которые имеют ключ объекта и значение.Некоторые возвращают 'media_type: tv', некоторые возвращают 'media_type: movie' У меня есть два разных маршрута для каждого из них.

Вот моя структура приложения

<BrowserRouter>
    <div className='App'>
      <Switch>
        <Route path='/' exact component={Home} />
        {/* <Route exact path='/details/:type/:id' component={ItemDetails} /> */}
        <Route exact path='/details/movie/:id' component={MovieDetails} />
        <Route exact path='/details/tv/:id' component={TvDetails} />
      </Switch>
    </div>
  </BrowserRouter>

Запрос на получение

` performSearch = () => { // Requesting data from API
    let now = (this.now = Date.now());
    axios.get(`${URL}api_key=${API_KEY}&language=en-US&query=${this.state.searchInput}${PARAMS}`)
        .then((res) => {
            console.log(res.data.results);
            // Accepting response if this request was the last request made
            if (now === this.now) {
               this.setState({ searchResults: res.data.results});
            }
        });
}`

Функциональный компонент, который отображает элементы результатов поиска

    const Suggestions = (props) => {
  const options = props.searchResults.map(r => (
    <li
      key={r.id} >
      <Link key={r.id} to={`/details/${r.id}`}>
        <a href='#t' className='rating'><i className='fas fa-star fa-fw' />{r.vote_average}</a>
        <img src={`https://image.tmdb.org/t/p/w185/${r.poster_path}`} alt={r.title} className='search-results-poster' />
        <a href='#t' className='search-results-name'>{r.name}</a>
        <a href='#t' className='search-results-title'>{r.title}</a>
      </Link>
    </li>
  ))
  return <ul className='search-results'>{options}</ul>
}

Я думаю, что-то вроде if(props.media_type === tv){<Redirect component={TvDetails}/> else {<Redirect component={MovieDetails}, я новичок в реакции-маршрутизаторе, поэтому я не уверен, каксделать это

Я пытался <Link key={r.id} to={ / details / $ {props.searchResults.media_type.value} / $ {r.id} }>

, но это говорит о том, что значение не определеноЯ вижу это в моем console.log

edit: <Link key={r.id} to={ / details / $ {r.media_type.value} / $ {r.id} }>

Перенаправляет меня в / details / undefined / 1234, так что я думаю, что значение все еще не определено?

Answer 1

Изменение<Link key={r.id} to={/details/${r.media_type.value}/${r.id}}>в<Link key={r.id} to={/details/${r.media_type}/${r.id}}>.Вам не нужно добавлять .value, чтобы получить значение из объекта

Answer 2

media_type само возвращает строковое значение в вашем случае и объект со значением атрибута.Так что вам просто нужно получить доступ к media_type, а не media_type.value

<Link key={r.id} to={`/details/${r.media_type}/${r.id}}`>