基于 api 响应的 React 路由器重定向

Question

我正在使用 tmdb api 多搜索，我有一个 get 请求 returns 返回具有对象键和值的项目数组。一些 return 'media_type: tv'，一些 return '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} 的事情，我是 react-router 的新手，所以我不确定该怎么做

我试过了<Link key={r.id} to={/details/${props.searchResults.media_type.value}/${r.id}}>

但它说值未定义，虽然我可以在我的 console.log

中看到它

编辑：<Link key={r.id} to={/详情/${r.media_type.value}/${r.id}}>

带我到 /details/undefined/1234 ，所以我猜这个值仍然未定义？

Answer 1

media_type 本身 returns 您的情况下的字符串值和具有属性值的对象。所以你只需要访问 media_type 而不是 media_type.value

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

Answer 2

改变
<Link key={r.id} to={/details/${r.media_type.value}/${r.id}}>
至
<Link key={r.id} to={/details/${r.media_type}/${r.id}}>。
您无需添加 .value 即可从对象中获取值

基于 api 响应的 React 路由器重定向

React router redirect based on api response

ecmascript-6

reactjs

react-router-v4

react-router-dom