I was trying to fetch data through a news api and there were different category of news with the help of react router I want to show news with different category, the link tag is working as it is changing the local newtwork url but the page is not showing the let say business news but showing the general category news by defalut it is general news only, I think I am missing something Can anyone help me out. I THINK THERE IS SOMETHING WRONG IN PROPS and there were errors in console about class not being className and after resolving the issue remains

this is the app.js (main file)

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.js 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 >
          <h1 className='mainheading' >THE PAHADI PRESS HEADLINES OF THE DAY</h1>
    <div >
        {this.state.loading && <Spinner />}
          {this.state.article.map((e) => {
            return <div  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>
        </>
    )
  }
}

CodePudding user response：

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>
  </>
);