Tengo una API con una lista de nombres (que podría cambiar). Luego, quiero crear rutas a partir de esa lista, pero sigo recibiendo un error de ruta no encontrada. Sin embargo, al agregar manualmente la ruta para un nombre, funciona. ¿Cómo agrego una ruta después de que la página se haya cargado para que funcione? Este es mi código a continuación
function App() { let json =[] fetch(`${baseURL}/applications/`).then(response =>{return response.json();}).then(data =>{json=data}) console.log("json =", json) return ( <Router> <div className="App"> <header className="App-header"> <Routes> <Route path="/" exact element={<ApplicationsList/>}/> <Route path={"/1080p-Lock"} exact element={<ApplicationPage name={"1080p-Lock"}/>}/> {json.map(item => {ReactDOM.render(<Route path={"/" + item} exact element={<ApplicationPage name={item}/>}/>)})} </Routes> </header> </div> </Router> ); } La función de procesamiento de React es una función sincrónica y pura, no puede esperar a que se complete la lógica asincrónica. El valor json se restablece a una matriz vacía en cada ciclo de procesamiento.
El mapeo de rutas solo necesita devolver los componentes de la Route que deben renderizarse, usar ReactDOM aquí no es muy válido.
Use el estado del componente para almacenar los datos obtenidos y un useEffect de montaje para realizar la solicitud de recuperación.
function App() { const [routes, setRoutes] = useState([]); useEffect(() => { fetch(`${baseURL}/applications/`) .then(response => { return response.json(); }) .then(data => { setRoutes(data); }) .catch(error => { // handle any rejected Promises, etc... }); }, []); return ( <Router> <div className="App"> <header className="App-header"> <Routes> <Route path="/" element={<ApplicationsList/>}/> <Route path={"/1080p-Lock"} element={<ApplicationPage name={"1080p-Lock"}/>}/> {routes.map(item => ( <Route path={"/" + item} element={<ApplicationPage name={item}/>}/> ))} </Routes> </header> </div> </Router> ); }