Question

我必须创建一种新闻网络应用程序。我正在使用NewsAPI.org进行API调用。我在一个页面中列出了一个新闻频道，单击任何一个频道都应在另一页面上呈现该新闻频道的特定内容。我有一些有关使用react-router的信息，但我想在处理外部域URL时不会使用。我不知道如何实现这一点。我在这里用过axios。

import React, { Component } from 'react';
import {connect} from 'react-redux';
import { fetchSourceList } from '../actions';

class SourceList extends Component{

  componentDidMount(){
     this.props.fetchSourceList();
  }

  renderList(){
   let {lists} = this.props;
   let returnHTML = [];
   for(let key in lists){
     lists[key].map((item)=>{
       returnHTML.push(
        <li className="list-group-item" key={item.id}>
            <a href={item.url}>{ item.name }</a>
        </li>
       );
     });
   }
   return returnHTML;
}

  render(){
    return (
      <div>
         <ul className = "list-group">
         <li className = "list-group-item text-light bg-dark"><h3>Sources</h3></li>
           {this.renderList()}
         </ul>
      </div>

    );
  }
}

function mapStateToProps(state){
  return { lists: state.sourceList };
}

export default connect(mapStateToProps, { fetchSourceList })(SourceList);

Answer 1

您已使用路由器，如下所示：

/news/:type

新闻是路线，类型是参数。

在 news 路由中，您将始终呈现相同的组件来呈现API响应，而您将使用 type 参数来切换频道并提供您使用的服务用于获取API。这也将允许用户复制/粘贴频道网址或将其添加为书签。

在Reactjs中单击外部URL时如何重定向到其他组件？

1 个答案: