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

我必须创建一种新闻网络应用程序。我正在使用NewsAPI.org进行API调用。我在一个页面中有一个新闻频道列表，单击任何一个频道都会在另一个页面上呈现该新闻频道的特定内容。我有一些关于使用react路由器的信息，但我想在处理外部域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);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../actions”导入{fetchSourceList}；
类SourceList扩展组件{
componentDidMount（）{
this.props.fetchSourceList（）；
}
renderList（）{
设{lists}=this.props；
让returnHTML=[]；
用于（让输入列表）{
列出[键].map（（项）=>{
returnHTML.push(


);
});
}
返回HTML；
}
render（）{
返回(

来源
{this.renderList（）}

);
}
}
函数MapStateTops（状态）{
返回{lists:state.sourceList}；
}
导出默认连接（MapStateTops，{fetchSourceList}）（SourceList）；

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

/news/:type

其中，新闻是路线，类型是参数

---

在NewsRoute中，您将始终呈现相同的组件以呈现API响应，而您将使用类型参数切换通道并为用于获取API的服务提供数据。这也将允许用户复制/粘贴频道url，或将其添加书签。

您面临的确切问题是什么？请您解释一下，在您想要实现的过程中，您面临的问题是什么？对我来说，您需要在单击时路由到新页面，带有一些id，f.x。使用React router，然后在您的新页面上，您可以使用componentDidMount（如本例中所示）获取数据并将其放入Redux中，正如您在这里使用的一样。我想要实现的是，单击{item.name}（这确实是一个新闻频道的名称，如BBC新闻），我应该被重定向到另一个组件，在该组件中，我必须显示该新闻频道的头条新闻（如BBC新闻的头条新闻）。在您的情况下，您将被重定向到不同的网页？？谢谢。这真的很有帮助！