import './css/App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { useEffect, useState } from 'react';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Aboutpage, data, Home, BackToTopButton, Partenariat, Navigationbar, Footer, Newspage } from './components/Common'
function App() {

    const [landingPageData, setLandingPageData] = useState({});
    useEffect(() => {
        setLandingPageData(data);

    }, []);
    return (
        <div className="App">
            <Router>
                <Navigationbar data={landingPageData.navbar} />

                <Routes >

                    <Route exact path='/' element={<Home />} />
                    <Route path='/Partenariat' element={<Partenariat />} />
                    <Route path='/Aboutpage' element={<Aboutpage />} />
                    {data ? data.news.map((d, i) => (
                        <Route key={i} path={d.path} element={<Newspage img={d.image} title={d.title} subtitle={d.subtitle} fullarticle={d.fullarticle} date={d.date} author={d.author} />} />
                    )) : "loading..."}

                </Routes>
                <Footer />
                <BackToTopButton />

            </Router>
        </div>
    );
}

export default App;

The idea was to pull any new articles from the JS object and map each to it's own page.

This is working fine locally but when deployed to netlify the pages pulled from the javascript object are inaccessible Everyone else seems to have an issue with the home page. I would very much appreciate any help with this