Skip to main content

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

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;

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

Origen Enlace

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;