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
La segunda, que es Libros y Articulos no me carga nada entre el header i el footer:
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,
cursos
yvideos
? Saludos