1

Intento hacer una sub-barra de navegación en uno de los component childs de la pagina principal. La pagina App.js, que es la principal tiene una barra de navegación.

import React, { useState, useEffect } from 'react';
import './App.css';
import Nav from './Components/NavFolder/Nav'
import Admin from './Components/AdminFolder/Admin'
import Home from './Components/HomeFolder/Home'
import Signin from './Components/Signin-RegisterFolder/Signin'
import Register from './Components/Signin-RegisterFolder/Register'
import SideDrawer from './Components/NavFolder/SideDrawer'
import Footer from './Components/FooterFolder/Footer'

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

function App() {
  ////NAV/BURGER NAV/////
  const [click, setClick] = useState(false)

  ////PRODUCTS STATES////
  const [prodList, setProdList] = useState([]);
  const [offset, setOffset] = useState(0);
  const [perPage] = useState(5);
  const [pageCount, setPageCount] = useState(0)

  ////REGISTER/SIGNIN STATES////
  const [userList, setUserList] = useState([]);
  const [toHome, setToHome] = useState(false) //to redirect to Home page
  const [user, setUser] = useState()

  ////LOG OUT////
  const clearStorage = () => {
    console.log("Logged Out")
    localStorage.clear();
    setUser()
  }

  useEffect(() => {
    const loggedInUser = localStorage.getItem("user");

    if (loggedInUser) {
      const foundUser = JSON.parse(loggedInUser);
      setUser(foundUser);
    }
  }, []);

return (
    <div>
      <Router>
        <header>
          {click ? <SideDrawer setClick={setClick} user={user} clearStorage={clearStorage} /> : null}
          <Nav user={user} clearStorage={clearStorage} click={click} setClick={setClick} />
        </header>

        <section className="App">

          <Route exact path="/" render={(props) => <Home {...props} prodList={prodList} setProdList={setProdList} />} />

          <Route exact path="/signin" render={(props) => <Signin {...props} user={user} setUser={setUser} setToHome={setToHome} toHome={toHome} />} />

          <Route exact path="/register" render={(props) => <Register {...props} userList={userList} setUserList={setUserList} />} />

          <Route exact path="/admin" render={(props) => <Admin {...props} user={user} prodList={prodList} setProdList={setProdList} offset={offset} setOffset={setOffset} perPage={perPage} pageCount={pageCount} setPageCount={setPageCount} />} />
        </section>

        <footer className="footer" id="footer">
          <Footer />
        </footer>
      </Router>
    </div >

  );

App.js, tiene varios child components y uno de ellos de llama Admin.js. Dentro de este child component quiero hacer una sub barra de navegación para acceder a otras paginas.

import React, { useState, useEffect } from 'react'
import './Admin.css';
import AdminNav from './AdminNav'
import Plantas from './Plantas'
import Libros from './Libros'
import Cursos from './Cursos'
import Videos from './Videos'
import { BrowserRouter as Router, Route } from 'react-router-dom'

const Admin = ({ prodList, setProdList, user, pageCount, setPageCount, perPage, setOffset, offset }) => {
    return (
        <div className='admin-page'>
            <div>
                <AdminNav />
            </div>
            <div>
                <Route path="/admin" render={(props) => <Plantas {...props} prodList={prodList} setProdList={setProdList} user={user} pageCount={pageCount} setPageCount={setPageCount} perPage={perPage} setOffset={setOffset} offset={offset} />} />
                <Route path="/admin/libros" render={(props) => <Libros {...props} prodList={prodList} setProdList={setProdList} user={user} pageCount={pageCount} setPageCount={setPageCount} perPage={perPage} setOffset={setOffset} offset={offset} />} />
                <Route path="/admin/cursos" render={(props) => <Cursos {...props} prodList={prodList} setProdList={setProdList} user={user} pageCount={pageCount} setPageCount={setPageCount} perPage={perPage} setOffset={setOffset} offset={offset} />} />
                <Route path="/admin/videos" render={(props) => <Videos {...props} prodList={prodList} setProdList={setProdList} user={user} pageCount={pageCount} setPageCount={setPageCount} perPage={perPage} setOffset={setOffset} offset={offset} />} />
            </div>
        </div>
    )
}
export default Admin

La primera Route si que funciona primera Route

La segunda, que es Libros y Articulos no me carga nada entre el header i el footer: Segunda Route

Y la sub-barra de Navegación de Admin.js es la siguiente:

import { NavLink } from 'react-router-dom'
import './AdminNav.css';

const AdminNav = ({ click, setClick }) => {

    const handleClick = () => {
        setClick(!click)
    }

    return (
        <nav className="admin-navbar">
            <NavLink className="admin-navlink"
                exact to={"/admin"}
                activeStyle={{
                    fontWeight: "bold",
                    color: "rgb(120, 120, 120)"
                }}
            >
                BOTANICA Y PLANTAS
            </NavLink>
            <hr className='admin-nav-hr'></hr>
            <NavLink className="admin-navlink"
                exact to={"/admin/libros"}
                activeStyle={{
                    fontWeight: "bold",
                    color: "rgb(120, 120, 120)"
                }}
            >
                LIBROS Y ARTICULOS
            </NavLink>
            <hr className='admin-nav-hr'></hr>
            <NavLink className="admin-navlink"
                exact to={"/admin/cursos"}
                activeStyle={{
                    fontWeight: "bold",
                    color: "rgb(120, 120, 120)"
                }}
            >
                CURSOS
            </NavLink>
            <hr className='admin-nav-hr'></hr>
            <NavLink className="admin-navlink"
                exact to={"/admin/videos"}
                activeStyle={{
                    fontWeight: "bold",
                    color: "rgb(120, 120, 120)"
                }}
            >
                VIDEOS
            </NavLink>
            <hr className='admin-nav-hr'></hr>
            <div className='menu-icon' onClick={handleClick}>
                <i className={click ? 'fas fa-times' : 'fas fa-bars'}></i>
            </div>
        </nav>
    );
};

export default AdminNav

Alguien sabe cual puede ser el problema?

Gracias,

1
  • ¿Cargan los componentes cursos y videos? Saludos
    – g.4
    Commented el 22 jun. 2021 a las 15:17

1 respuesta 1

0

Tu componente Admin.js no debería utilizar otro Router. Ya que todo se encuentra envuelto en un Router, sólo coloca las rutas

Tienes:

<Router>
            <Link path="/admin" render={(props) => <Plantas {...props} prodList={prodList} setProdList={setProdList} user={user} pageCount={pageCount} setPageCount={setPageCount} perPage={perPage} setOffset={setOffset} offset={offset} />} />
            <Route path="/admin/libros" render={(props) => <Libros {...props} prodList={prodList} setProdList={setProdList} user={user} pageCount={pageCount} setPageCount={setPageCount} perPage={perPage} setOffset={setOffset} offset={offset} />} />
            <Route path="/admin/cursos" render={(props) => <Cursos {...props} prodList={prodList} setProdList={setProdList} user={user} pageCount={pageCount} setPageCount={setPageCount} perPage={perPage} setOffset={setOffset} offset={offset} />} />
            <Link path="/admin" render={(props) => <Videos {...props} prodList={prodList} setProdList={setProdList} user={user} pageCount={pageCount} setPageCount={setPageCount} perPage={perPage} setOffset={setOffset} offset={offset} />} />
        </Router>

Quita las etiquetas <Router></Router> y deja sólo las <Route></Route>

1
  • He cambiado la etiqueta de Router por un div y sigue sin funcionar. No entiendo para nada el porque no debería funcionar, la sub-barra de navegación diría que está correcta y las rutas también.
    – Nuria
    Commented el 28 jun. 2021 a las 10:25

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.