Implementé una pila PERN en Heroku y funciona bien si solo navego haciendo clic en los componentes, pero cuando actualizo la página, por ejemplo, "https://birdex.herokuapp.com/species/Red-crested%20turaco", ya no ve el contenido de la página, solo la información de la API.

Esta es la URL de mi aplicación implementada: https://birdex.herokuapp.com/

Entiendo que puedo tener los mismos puntos finales en mi componente de enrutador de reacción, así como en el servidor, pero he intentado agregar "/api/{endpoints}" para cada solicitud de API en mi lado del servidor y esto en su lugar da como resultado un error 304. Tengo que borrar el "/api" para que funcione.

¿Como puedo resolver esto? ¡Gracias!

servidor.js

 app.get("/species/:name", async (req, res) => { try { const { name } = req.params; const familyId = await pool.query(advance_query, [name]); res.json(familyId.rows); } catch (err) { console.log(err.message); } }); ... if (process.env.NODE_ENV === "production") { //server static content //npm run build app.use(express.static(path.join(__dirname, "client/build"))); app.get("/*", (req, res) => { res.sendFile(path.join(__dirname, "client/build/index.html")); }); } app.listen(PORT, () => { console.log(`server has started on port ${PORT}`); });

index.js (cliente)

 const [family, setFamily] = useState(""); useEffect(() => { const getFamily = async () => { try { const response = await fetch(`/species/${match.params.name}`); const jsonData = await response.json(); setFamily(jsonData[0]); } catch (err) { console.log(err); } }; getFamily(); setNewDescription(family.speciesdesc); setNewImg(family.speciesimg); }, [match.params.name]);

App.js (contiene todas las rutas)

 function App() { return ( <Router history={customHistory}> <Switch> <Route exact path='/'> <HomePage/> </Route> {/* Only when u use this format component={} then the params can be pass down */} <Route exact path ='/species/:name' component={SingleSpeciesPage}/> <Route exact path ='/birds/:name/:birdsid' component={SingleBird}/> <Route exact path = '/birds/:birdName/:birdsid/:species_name/entries' component={EntriesPage}/> </Switch> </Router> ); }