Why the Link tag in react routers is not showing me the desired page?

Question

I was trying to fetch data through a news API and there were different categories of news with the help of react-router I want to show news of different categories, the link tag is working as it is changing the local host URL but the page is not showing the particular news category. Can anyone help me out?

This is the App.js,

import './App.css';
import React, { Component } from 'react'
import Navbar from './COMPONENTS/Navbar';
import News from './COMPONENTS/News';
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
export default class App extends Component {
render() {
return (
  <>
      <BrowserRouter>
    <Navbar/>
    <News category="general"/>
      <Routes>
        <Route path="/business" element={<News key="business" category="business"/>}></Route>
        <Route path="/sports" element={<News key="sports" category="sports"/>}></Route>
        <Route path="/health" element={<News key="health" category="health"/>}></Route>
        <Route path="/politics" element={<News key="politics" category="politics"/>}></Route>
      </Routes>
      </BrowserRouter>
      </>
    )
  }
}

This is the VerticalNav.jsx file, here are all the links,

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
export default class VerticalNav extends Component {
render() {
    return (
        <>
            <nav className="navbar2">
                    <ul className="ul_list">
                        <li className="vertical_comp">
                            <Link className="avertical_comp" to="/business">Business</Link>
                        </li>
                        <li className="vertical_comp">
                            <Link className="avertical_comp" to="/sports">Sports</Link>
                        </li>
                        <li className="vertical_comp">
                            <Link className="avertical_comp" to="/health">Health</Link>
                        </li>
                        
                    </ul>
                </nav>
            </>
        )
    }
}

And this is the file where I am using props,

import React, { Component } from 'react'
 import NewsItem from './NewsItem'
 import Spinner from './Spinner';
import VerticalNav from './Verticalnav';
import PropTypes from 'prop-types';
export default class News extends Component {
static defaultProps = {
   category : 'general',
 }

 static propTypes = {
  category : PropTypes.string,
 }
constructor() {
super();
this.state = {
  article: [],
  page: 1,
  loading: false,
}
 }

    async componentDidMount() {
    this.setState({
     loading: true
    })
let url = `https://newsapi.org/v2/top-headlines? country=in&category=${this.props.category}&
     apiKey=6aeca0faebbd45c1a1ec3c463f703ebb`;
   let data = await fetch(url);
    let parseData = await data.json();
   this.setState({
      article: parseData.articles,
     loading: false
    });
   }

  handleNext = async () => {
   let url = `https://newsapi.org/v2/top-headlines? 
  country=in&category=${this.props.category}&apiKey=6aeca0faebb
    d45c1a1ec3c463f703ebb&page=${this.sta 
  te.page + 1}`;
     this.setState({ loading: true });
  let data = await fetch(url);
  let parseData = await data.json();
   this.setState({
   page: this.state.page + 1,
  article: parseData.articles,
  loading: false
    })
 console.log(this.state.page);
    }
  handlePrevious = async () => {
  let url = `https://newsapi.org/v2/top-headlines? 
 country=in&category=${this.props.category}&apiKey=6aeca0faebbd45c1
  a1ec3c463f703ebb&page=${this.sta 
 te.page - 1}`;
 let data = await fetch(url);
   let parseData = await data.json();
this.setState({
  page: this.state.page - 1,
  article: parseData.articles,
  loading: false
    })
   }

  render() {
  return (
  <>
  <div className="vertical">
  <VerticalNav/>
  <div class="card1">
          <h1 className='mainheading' >THE PAHADI PRESS HEADLINES OF THE DAY</h1>
    <div class="row row1">
        {this.state.loading && <Spinner />}
          {this.state.article.map((e) => {
            return <div class="col-md-4 colu" key={e.url} >
              <NewsItem title={e.title} decription={e.description} imageUrl={e.urlToImage} 
               newsUrl={e.url}
                newsauthor={e.author} source={e.source.name} />
            </div>
          })
         }
            </div>
          </div>
        </div>
        </>
    )
  }
}

Answer 1

Try to move the general News component inside the Routes:

return (
  <>
    <BrowserRouter>
      <Navbar />
      <Routes>
      <Route
          path='/'
          element={<News key='general' category='general' />}
        ></Route>
        <Route
          path='/business'
          element={<News key='business' category='business' />}
        ></Route>
        <Route
          path='/sports'
          element={<News key='sports' category='sports' />}
        ></Route>
        <Route
          path='/health'
          element={<News key='health' category='health' />}
        ></Route>
        <Route
          path='/politics'
          element={<News key='politics' category='politics' />}
        ></Route>
      </Routes>
    </BrowserRouter>
  </>
);