React App pages working fine except those pulled from javascript object

Question

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

Answer 1

By adding The _redirects file to the public folder with the following settings, It worked just fine /* /index.html 200