1

Hola que tal mi problema es el siguiente estoy haciendo un proyecto sencillo para practicar react, estoy utilizando el router, así como también Bootstrap, mi problema es que ya tengo el navbar funcionando y según lo que leí la documentación, hice buen uso del router pero al usarlo solo 2 de los 3 links funcionan, les adjunto mi código.

Dashboard.js (Aqui se encuentra el switch y las rutas a renderizar)

import React from 'react';
import Navbar from './Navbar';
import { Switch, Route } from 'react-router-dom';
import MemoriesCreate from '../memories/MemorieCreate';
import MemoriesScreen from '../memories/MemoriesScreen';


const Dashboard = () => {
    return (
        <>
            <Navbar />
            <Switch>

                <Route exact path="/" component={ props => (
                    <h1>Hola mundo</h1>
                    )} 
                />

                <Route exact to="/subir-recuerdo" render={props => (
                    <MemoriesCreate {...props} />
                )} />

                <Route exact to="/recuerdos" component={MemoriesScreen}/>

            </Switch>
        </>
    )
}

export default Dashboard;

Aqui tambien les dejo el codigo del navbar por si llego a tener algun error del que no me haya percatado.

import React from 'react';
import { Link } from 'react-router-dom';

const Navbar= () => {
    return (
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <Link class="navbar-brand" to="/">NuestrosRecuerdos</Link>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav ml-auto">
                <Link className="nav-link" to="/subir-recuerdo">
                    <button className="btn btn-primary">
                        Crear recuerdo
                    </button>
                </Link>
                <Link className="nav-link" to="/recuerdos">
                    <button className="btn btn-primary">
                        Ver recuerdos
                    </button>
                </Link>

                <a className="nav-link">
                    <button className="btn btn-danger">
                        Salir
                    </button>
                </a>
                </div>
            </div>
        </nav>
    )
}

export default Navbar;

Los componentes no renderizan mas que el mismo nombre del componente y este es el resultado. Como ven la ruta inicial y la de subir recuerdo funcionan pero la de ver recuerdos muestra el mismo contenido que la de crear introducir la descripción de la imagen aquíintroducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

ACTUALIZACIÓN Este es el componente en el que se encuentra el router

import React from 'react';
import Dashboard from './components/dashboard/Dashboard';
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <div>
        <Router>
          <Dashboard />
        </Router>
    </div>
  );
}

export default App;

Aquí están los componentes que intento renderizar en las distintas rutas. Como se ve en el código use useEffect para ver si el componente se montaba al presionar el botón y no, se monta el MemorieCreate no el MemorieScreen

import React, { useEffect } from 'react';

export default function MemorieCreate() {
    useEffect(() => {
        console.log('create montado')
    })

    return (
        <h1>
            Memorie Create
        </h1>
    )
}


import React, { useEffect } from 'react';

export default function MemoriesScreen() {
    useEffect(() => {
        console.log('componente montado')
    }, [])

    return(
        <h1>
            MemoriesScreen
        </h1>
    )
}
3
  • ACTUALIZACION, seguí intentando resolverlo, agregue useEffect en cada componente que mostrara en consola su nombre al renderizarlo y ese botón que falla no renderiza el componente que le paso por el prop component="" si no el mismo de la ruta de crear Commented el 21 ago. 2020 a las 1:03
  • No veo algún error particular, sólo para descartar.. podrías incluir el componente que lista? Commented el 21 ago. 2020 a las 2:01
  • Ya lo añadí, igualmente yo ya me canse de buscar donde esta mi error y sigo sin encontrarlo, te agradecería la ayuda. Commented el 21 ago. 2020 a las 3:32

2 respuestas 2

0

Bueno finalmente el error fue que al momento de configurar las rutas, estabas usando un to cuando deberia ser un path

<Route exact path="/subir-recuerdo" render={props => (<MemoriesCreate {...props} />)} />

<Route exact path="/recuerdos" component={MemoriesScreen}/>

Te dejo un ejemplo con el cambio incluido.

Nos comentas si te funciona :D

1
  • Muchas gracias, no lo note hasta que lo mencionaste! Commented el 21 ago. 2020 a las 15:12
0

Esto pudiera ser porque como esta el Dashboard.js tienes que engloblar tus rutas "Route" en el componente BrowserRouter que generalmente le cambian el nombre a router generando que tengas este componente "Router" te dejo un ejemplo de como tengo mi aplicación para que te des una idea amigo:

import React from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Redirect
  } from "react-router-dom";

import Navbar from './Navbar';
import MemoriesCreate from '../memories/MemorieCreate';
import MemoriesScreen from '../memories/MemoriesScreen';

const Dashboard = () => {
    return (
        <>
 <Router>
            <div>
                
                <Navbar />               

                <Switch>
                    <Route exact path="/" component={ Home }/>
                    <Route exact path="/subir-recuerdo" component={ MemoriesCreate } />
                    <Route exact path="/recuerdos" component={ MemoriesScreen }/>
                    <Redirect to="/" />
                </Switch>
            </div>
    </Router>
   </>
    );
}

function Home() {
  return <h2>Home</h2>;
}
export default Dashboard;

ACTUALIZACION, seguí intentando resolverlo, agregue useEffect en cada componente que mostrara en consola su nombre al renderizarlo y ese botón que falla no renderiza el componente que le paso por el prop component="" si no el mismo de la ruta de crear

1
  • Hola benji, el componente dashboard si esta dentro de un router solo que fuera del componente en la parte final de al pregunta esta el código, igualmente, probe lo que me dijiste y sigue sin funcionar esa única ruta que es la del botón ver recuerdos, sigue mostrándome el mismo texto. Commented el 20 ago. 2020 a las 22:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.