es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La página web está en blanco (Problema con react-router)

Estoy tratando de aprender MERN principalmente React siguiendo un tutorial (https://www.youtube.com/watch?v=7CqJlxBYj-M) y he seguido el código exactamente, pero cuando inicio el servidor y abro la página web está en blanco.
Sé que el problema está en las cuatro rutas de React porque si las elimino, la página web muestra la barra de navegación. También no obtengo ningún error al ejecutar el servidor.
Este es el código del archivo app.js:

import React from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter as Router, Route,} from "react-router-dom";

import Navbar from "./components/navbar.component"
import ExercisesList from "./components/exercises-list.component";
import EditExercise from "./components/edit-exercise.component";
import CreateExercise from "./components/create-exercise.component";
import CreateUser from "./components/create-user.component";

function App() {
  return (
    <router>
      <div classname="container">
      <navbar></navbar>
      <br>
      <route path="/" exact="" component="{ExercisesList}"></route>
      <route path="/edit/:id" component="{EditExercise}"></route>
      <route path="/create" component="{CreateExercise}"></route>
      <route path="/user" component="{CreateUser}"></route>
      </div>
    </router>
  );
}

export default App;

Este es el código para create-exercise:

import React, { Component } from 'react';

export default class CreateExercise extends Component{
  render() {
    return (
        <div>
            <p>You are on the create exercises List componentt</p>
        </div>
    )
  }
}

Los otros tres tienen el mismo código.
Este es el enlace al repositorio de GitHub que contiene el código del tutorial: https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqa3VfM2thaXc4b1RoODUxWkh0MXprN2NFV3E2QXxBQ3Jtc0trbTdTQll1WmVFQ1hRb0ZOVWlUVVROUG1ta2RranJocVFmektvb0F0VWpKQjNWY0tIelBuZ1ZLNDU5VVFhSVZiS3VGTnJHT19ja0NYdVI3OFdkZVVQS0ZoLV8wQkxhT2xqeS0yakNPSXNyZjlLTW5Vbw&q=https%3A%2F%2Fgithub.com%2Fbeaucarnes%2Fmern-exercise-tracker-mongodb

Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    Parece que el problema radica en las rutas de enrutamiento en el archivo App.js. Como se mencionó, la barra de navegación se muestra correctamente, pero la página está en blanco. Esto sugiere que el problema no está en los componentes en sí mismos, sino en cómo están siendo enrutados.

    Tras inspeccionar el código proporcionado, parece que las rutas de enrutamiento son correctas. Sin embargo, aún vale la pena verificar la ortografía y capitalización exactas de las rutas.

    Si las rutas son realmente correctas, otro posible problema podría estar relacionado con las versiones de las dependencias que se están utilizando. Siempre es una buena idea asegurarse de que las versiones de react-router-dom y cualquier otra dependencia sean compatibles entre sí.

    Por último, sugiero revisar la consola de desarrollo del navegador para ver si se muestran errores o advertencias. Esto podría dar algunas pistas sobre lo que está causando el problema.

    En general, sin más información sobre el error específico o el comportamiento que se está exhibiendo, es difícil determinar exactamente cuál es el problema. Pero revisar las rutas de enrutamiento, las versiones de las dependencias y la consola de desarrollo son buenos puntos de partida.

Comments are closed.