为什么这个按钮在加载新组件时仍然显示?

Question

我试图从RSS提要加载项目一旦查看更多按钮被点击。我成功地加载了项目，但是，按钮仍然出现。我做错了什么/我该如何解决这个问题?

下面是点击按钮之前显示的内容:https://i.stack.imgur.com/vaMSe.png

下面是点击按钮后显示的内容:https://i.stack.imgur.com/56mmJ.png

Home.js

function Home() {


return(


<Router><Link to="/marinersfeed">
<div class="d-grid gap-2"> <Button size='lg' id='billsViewMoreButton'> View More</Button> </div>
</Link><Route path="/marinersfeed" component={MarinersFeed} /></Router>


)
}
export default Home;

MarinersFeed.js

function MarinersFeed() {


const [completeFeed, setCompletedFeed] = React.useState([]);
const [feedTitle, setFeedTitle] = React.useState([]);
const [feedLink, setFeedLink] = React.useState([]);

React.useEffect(async () => {

let Parser = require('rss-parser');
let parser = new Parser();
const tFeed = [];
const tFeedTitle = [];
const tFeedLink = []


let feed = await parser.parseURL('https://*******.herokuapp.com/https://www.mlb.com/mariners/feeds/news/rss.xml');
feed.items.forEach(item => {
tFeed.push(item.title + ':' + item.link);
tFeedTitle.push(item.title);
tFeedLink.push(item.link);

});
setCompletedFeed(tFeed);
setFeedTitle(tFeedTitle);
setFeedLink(tFeedLink);

}, []);

const renderData = () => {
return completeFeed.map((f, index) => {
const title = feedTitle[index];
const link = feedLink[index];
return <div key={index} >

<h3>{title}</h3>
<h3>{link}</h3>
</div>
})
}




return(
<>

{renderData()}
</>
)

}
export default MarinersFeed;

Answer 1

您可以将Link设置为单独的路由。

即使路由被改变，点击按钮和RSS提要显示。该链接被显示为不属于任何单独的路由，而只是放置在Router中。

<Router>
<Switch>
<Route path="/marinerFeed">
<MarinersFeed />
</Route>
<Route path="/">
<Link to="/marinerFeed">Button</Link>
</Route>
</Switch>
</Router>