React Navbar navigering går inget vidare, tips??
Tjena gänget! Sitter med en react applikation som verkligen inte går min väg för tillfället, precis kommit in på react och försöker få min navbar att göra som den skall. Försöker få ordning på en så simpel sak som att kunna navigera till de olika sidorna. Sidan blir endast helt vit och har bara lite mockdata för att försöka se någonting.
Man kommer in på förstasidan där man får logga in, väl inloggad så finns en meny. Det som inte fungerar är att jag inte får fram sidan, bifogar kod nedan. Vet inte om jag missar någon typ av import eller om man ska använda Link eller något annat istället för href. Får gärna kolla o se om ni kan få mig i rätt riktning.
Startsidan efter att man har loggat in:
import Navbar from "../Navbar/index";
import React from "react";
const Main = () => {
return (
<React.Fragment>
<Navbar/>
</React.Fragment>
);
};
export default Main;
Min navbar som jag importerar till startsidan efter inlogg, här testar jag enbart länken för forum sidan för tillfället
import { useRef } from 'react';
import { FaBars, FaTimes } from 'react-icons/fa';
import './style.css';
// import logo from '../images/bravida-logo-white.png';
function Navbar() {
const handleLogout = () => {
localStorage.removeItem("token");
window.location.reload();
};
const navRef = useRef();
const showNavbar = () => {
navRef.current.classList.toggle("responsive_nav");
};
return(
<header>
<h3>Logo</h3>
{/* <h3><img src={logo}></img> </h3> */}
<nav ref={navRef}>
<a href="/#">Hem</a>
<a href="/#">Nyheter</a>
<a href="/Chat">Forum</a>
<a href="/#">Kontakt</a>
<a href="/#" onClick={handleLogout}>Logga Ut</a>
<button className="nav-btn nav-close-btn" onClick={showNavbar}>
<FaTimes/>
</button>
</nav>
<button className="nav-btn" onClick={showNavbar}>
<FaBars />
</button>
</header>
);
}
export default Navbar;
Forum sida för tillfället:
function Chat() {
return(
<h3>HejHDAHDHSAHDSAHDHSAHDAHDHSHDASHDSAH</h3>
);
}
export default Chat;
App.js
import { Route, Routes, Navigate } from "react-router-dom";
import Main from "./components/Main";
import Signup from "./components/Signup";
import Login from "./components/Login";
function App() {
const user = localStorage.getItem("token");
return (
<Routes>
{user && <Route path="/" exact element={<Main />} />}
<Route path="/signup" exact element={<Signup />} />
<Route path="/login" exact element={<Login />} />
<Route path="/" element={<Navigate replace to="/login" />} />
</Routes>
);
}
export default App;
Det är hela koden från alla sidorna, så missar jag något får ni gärna hojta till!
