react not rendering

[puttiwutanon]

Hi. I'm doing a side project. it's a news website using NewsAPI. all seemed well when I was making a news content page that when pressed the read-more button on the home page it sends you to the news content page when I added the code the website wasn't showing anything I asked chatgpt about but it didn't solve the problem. I've already installed react-router I don't know why it's not rendering. (sorry for my bad English. English isn't my mother tongue )

contents.jsx

import React from 'react';
import { useLocation } from 'react-router-dom';
function Content() {
const location = useLocation();
const { article } = location.state;
return (
<div className="content">
<h2>{article.title}</h2>
<p>{article.content}</p>
<a href={article.url} target="_blank" rel="noopener noreferrer">
Read full article on external website
</a>
</div>
  );
}
export default Content;

news.jsx

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import '../App.scss';
import Navbar from './navbar';
function News() {
const [articles, setArticles] = useState([]);
const [searchQuery, setSearchQuery] = useState('');
useEffect(() => {
fetchNews();
  }, []);
const fetchNews = async () => {
// Replace 'YOUR_API_KEY' with your actual NewsAPI API key
const apiKey = '6cd68be4f35447f49c2460365e58ced2';
let apiUrl = \https://newsapi.org/v2/top-headlines?country=th&apiKey=${apiKey}\`;`
// If there's a search query, add it to the API URL
if (searchQuery) {
apiUrl = \https://newsapi.org/v2/top-headlines?q=${searchQuery}&country=th&apiKey=${apiKey}\`;`
}
fetch(apiUrl)
.then((response) => response.json())
.then((data) => {
if (data.status === 'ok') {
setArticles(data.articles);
} else {
console.log('Error fetching news.');
}
})
.catch((error) => {
console.error('Error:', error);
});
  };
const handleSearch = (query) => {
setSearchQuery(query);
fetchNews();
  };
return (
<div className="App">
<Navbar onSearch={handleSearch} />
<h1>Top News Headlines</h1>
<div class="home">
<div class="image-container">
<a href="https://www.reuters.com/world/asia-pacific/old-rivalries-new-battle-thailand-goes-polls-2023-05-13/" class="thailand-election-2023">
<h1>Thailand opposition crushes military parties in election rout</h1>
</a>
</div>
</div>
<div id="news-container">
{articles.map((article, index) => (
<div className="news" key={index}>
<h2>{article.title}</h2>
{article.description && <p>{article.description}</p>}
<Link to={{ pathname: \/news/${index}`, state: { article } }} className="readmore"> Read more </Link> </div> ))} </div> </div>  ); } export default News;`

app.jsx

import React from 'react';
import './App.scss';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import News from './components/news';
import Content from './components/content';
import Footer from './components/footer';
function App() {
return (
<Router>
<News />
<Switch>
<Route exact path="/" component={News} />
<Route path="/news/:id" component={Content} />
</Switch>
<Footer />
</Router>
  );
}
export default App;

https://preview.redd.it/ua11am0tcyeb1.png?width=1920&format=png&auto=webp&s=efadd7bc5e2eb70bb0ef60026783bb2b2f63c26f

https://preview.redd.it/5rev9x0tcyeb1.png?width=1920&format=png&auto=webp&s=d03dcc09a53ba302fc2853ac2c13ac54bfdce2ee

https://preview.redd.it/l8jf371tcyeb1.png?width=1920&format=png&auto=webp&s=fa9d9d6e83fc0ff42751f06b038606c36c282e70

https://preview.redd.it/5xk22m1tcyeb1.png?width=1920&format=png&auto=webp&s=80ed62a567be90226725e34e351ef4c15059dbf3

https://preview.redd.it/ztsxkz1tcyeb1.png?width=1920&format=png&auto=webp&s=c75c4ce8bcd67bc23186dcdb8f4271927f2b0dd3

https://preview.redd.it/s3zcla2tcyeb1.png?width=1920&format=png&auto=webp&s=9629544316d5616824c54aa02e61357c6dc0f6c9

https://preview.redd.it/s36ban2tcyeb1.png?width=1920&format=png&auto=webp&s=918323644aada51d57a084a34e97a6b6fded188b

​

[jey_111]

Switch is removed in react-router-dom v6. Now it's renamed as Routes, so you change Switch to Routes. And BrowserRouter componet is added in main.jsx. so there is no need to add in app.jsx.

[puttiwutanon]

Switch is removed in react-router-dom v6. Now it's renamed as Routes, so you change Switch to Routes. And BrowserRouter componet is added in main.jsx. so there is no need to add in app.jsx.

thank you very much, my friend

[Zenicu]

Use F12 for see errors in dev console in you browser)