title: React App pages working fine except those pulled from javascript object
body: <pre><code>import './css/App.css';
  import 'bootstrap/dist/css/bootstrap.min.css';
  import { useEffect, useState } from 'react';
  import { BrowserRouter as Router, Routes, Route } from &quot;react-router-dom&quot;;
  import { Aboutpage, data, Home, BackToTopButton, Partenariat, Navigationbar, Footer, Newspage } from './components/Common'
  function App() {
  
      const [landingPageData, setLandingPageData] = useState({});
      useEffect(() =&gt; {
          setLandingPageData(data);
  
      }, []);
      return (
          &lt;div className=&quot;App&quot;&gt;
              &lt;Router&gt;
                  &lt;Navigationbar data={landingPageData.navbar} /&gt;
  
                  &lt;Routes &gt;
  
                      &lt;Route exact path='/' element={&lt;Home /&gt;} /&gt;
                      &lt;Route path='/Partenariat' element={&lt;Partenariat /&gt;} /&gt;
                      &lt;Route path='/Aboutpage' element={&lt;Aboutpage /&gt;} /&gt;
                      {data ? data.news.map((d, i) =&gt; (
                          &lt;Route key={i} path={d.path} element={&lt;Newspage img={d.image} title={d.title} subtitle={d.subtitle} fullarticle={d.fullarticle} date={d.date} author={d.author} /&gt;} /&gt;
                      )) : &quot;loading...&quot;}
  
                  &lt;/Routes&gt;
                  &lt;Footer /&gt;
                  &lt;BackToTopButton /&gt;
  
              &lt;/Router&gt;
          &lt;/div&gt;
      );
  }
  
  export default App;
  </code></pre>
  <p>The idea was to pull any new articles from the JS object and map each to it's own page.</p>
  <p><strong>This is working fine locally but when deployed to netlify the pages pulled from the javascript object are inaccessible</strong>
  Everyone else seems to have an issue with the home page.
  I would very much appreciate any help with this</p>