Develop Reference

Routes not working in navbar in react app

I have created a navbar component in my react app using tailwindcss for styling. I have imported react-router-dom#6.6.1 and tried to set up routes but can't get my pages/routes to show up.
Index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
App.js
import React from "react";
import "./App.css";
import { Route, Routes } from "react-router-dom";
import Home from "./routes/Home.js";
import About from "./routes/About.js";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
function App() {
return (
<>
<Navbar />
<Routes>
<Route path="/" exact element={<Home />}></Route>
<Route path="/About" element={<About />}></Route>
</Routes>
<Footer />
</>
);
}
export default App;
Home page
import React from "react";
const Home = () => {
return (
<div>
<h1 className="text-black text-3xl">Home</h1>
</div>
);
};
export default Home;
I would expect to see Home appear on the "/" route when I click on the home link on the navbar and the same for About. However, I don't seem to be returning any routes.
About page:
const About = () => {
return <h1>About Wick House</h1>;
};
export default About;
Navbar
import React, { useState } from "react";
import { Link } from "react-router-dom";
const Navbar = () => {
let [open, setOpen] = useState(false);
return (
<header className="w-full fixed top-0 left-0 bg-slate-400 h-14">
<nav className="md:flex items-center justify-between px-[8%] ">
<div
className=" text-base cursor-pointer flex items-center
text-white gap-4 pt-2"
>
<img
src="/wickhouse-logo-192x192.png"
className="w-10 rounded"
alt="Wick House Publishing Logo"
/>
<h1>WICK HOUSE PUBLISHING</h1>
</div>
<div
onClick={() => setOpen(!open)}
className="text-3xl text-white absolute right-[8%] top-3 cursor-pointer md:hidden"
>
<ion-icon name={open ? "close" : "menu"}></ion-icon>
</div>
<ul
className={`md:flex md:items-center md:pt-2 absolute md:static md:bg-slate-400 bg-slate-600 md:z-auto z-[10] left-0 w-full md:w-auto md:pl-0 pl-[8%] md:transition-none transition-all duration-500 ease-in ${
open ? "top-14 " : "top-[-490px]"
}`}
>
<li className=" md:ml-8 text-base md:my-0 my-4">
<Link
to="/"
className="text-white hover:text-gray-300 duration-500"
>
HOME
</Link>
</li>
<li className=" md:ml-8 text-base md:my-0 my-4">
<Link
to="/About"
className="text-white hover:text-gray-300 duration-500 md:ml-8 text-base md:my-0"
>
ABOUT
</Link>
</li>
<li className=" md:ml-8 text-base md:my-0 my-4">
<Link
to="/Authors"
className="text-white hover:text-gray-300 duration-500 md:ml-8 text-base md:my-0"
>
AUTHORS
</Link>
</li>
<li className=" md:ml-8 text-base md:my-0 my-4">
<Link
to="/Contact"
className="text-white hover:text-gray-300 duration-500 md:ml-8 text-base md:my-0"
>
CONTACT
</Link>
</li>
</ul>
</nav>
</header>
);
};
export default Navbar;
I have tried the documentation, guides, youtube and can't figure it out.

react router bootstrap renders a blank page when using Linkcontainer in navbar

I used the react router bootstrap element 'linkContainer' to try and create a hyperlink leading to the '/courses' page but the browser returns a blank page with the following error in the console: React.children.only expected to receive a single react element child.
at Object.onlyChild [as only]
at LinkContainer
import React from 'react';
import { Container, Nav, Navbar, NavDropdown, Offcanvas } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap'
function Header() {
return (
<header>
<Navbar bg="black" variant= "dark" expand='lg' className="py-4 border border-0">
<Container fluid>
<LinkContainer to='/'>
<Navbar.Brand> Market Snipers Academy </Navbar.Brand>
</LinkContainer>
<Navbar.Toggle aria-controls={`offcanvasNavbar-expand`} />
<Navbar.Offcanvas
id={`offcanvasNavbar-expand`}
aria-labelledby={`offcanvasNavbarLabel-expand`}
placement="end"
>
<Offcanvas.Header closeButton>
<Offcanvas.Title id={`offcanvasNavbarLabel-expand`}>
Market Snipers Academy
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav variant='pills' className="justify-content-start flex-grow-1 pe-3 rounded">
<LinkContainer to='/courses'> <Nav.Link>Courses</Nav.Link> </LinkContainer>
<NavDropdown
title="Dropdown"
id={`offcanvasNavbarDropdown-expand`}
>
<NavDropdown.Item href="#action3">Action</NavDropdown.Item>
<NavDropdown.Item href="#action4">
Another action
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action5">
Something else here
</NavDropdown.Item>
</NavDropdown>
</Nav>
<Nav>
<Nav.Link href="#deets">Login</Nav.Link>
<Nav.Link eventKey={2} href="#memes">
Signup
</Nav.Link>
</Nav>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Container>
</Navbar>
</header>
)
}
export default Header

Uncaught TypeError: Cannot read properties of undefined (reading 'pathname') and The above error occurred in the <Link> component:

I am using react-router-dom v6 but I am following an old tutorial. I am getting above mentioned error and I tried many ways but still getting same error.
This is the file which generating error:
import React from "react";
import "./sidebar.css";
import logo from "../../images/logo.png";
import { Link } from "react-router-dom";
import { TreeView, TreeItem } from "#material-ui/lab";
import ExpandMoreIcon from "#material-ui/icons/ExpandMore";
import PostAddIcon from "#material-ui/icons/PostAdd";
import AddIcon from "#material-ui/icons/Add";
import ImportExportIcon from "#material-ui/icons/ImportExport";
const Sidebar = () => {
return (
<div className="sidebar">
<Link to="/">
<img src={logo} alt="Ecommerce" />
</Link>
<Link to="/admin/dashboard">
<p>
Dashboard
</p>
</Link>
<Link>
<TreeView
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ImportExportIcon />}
>
<TreeItem nodeId="1" label="Products">
<Link to="/admin/products">
<TreeItem nodeId="2" label="All" icon={<PostAddIcon />} />
</Link>
<Link to="/admin/product">
<TreeItem nodeId="3" label="Create" icon={<AddIcon />} />
</Link>
</TreeItem>
</TreeView>
</Link>
</div>
);
};
export default Sidebar;

You've a Link component without a to prop wrapping the TreeView component. to is a required prop.
Link
interface LinkProps
extends Omit<
React.AnchorHTMLAttributes<HTMLAnchorElement>,
"href"
> {
replace?: boolean;
state?: any;
to: To; // <-- non-optional
reloadDocument?: boolean;
}
I don't think a link makes sense here so I suggest just removing it.
Example:
const Sidebar = () => {
return (
<div className="sidebar">
<Link to="/">
<img src={logo} alt="Ecommerce" />
</Link>
<Link to="/admin/dashboard">
<p>Dashboard</p>
</Link>
<TreeView
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ImportExportIcon />}
>
<TreeItem nodeId="1" label="Products">
<Link to="/admin/products">
<TreeItem nodeId="2" label="All" icon={<PostAddIcon />} />
</Link>
<Link to="/admin/product">
<TreeItem nodeId="3" label="Create" icon={<AddIcon />} />
</Link>
</TreeItem>
</TreeView>
</div>
);
};
If you did actually mean for a Link to wrap all of that sub-menu then it needs the required to prop.

How to set an an active class to a variable - React

My first question on S.O. let's see how it goes.
I'm trying to set the "active class" to a variable in my Home.js, and pass down the value, as a prop to my <Buddy /> component. Once there I will set that to an integer to decide what slide my text carousel goes to. I'll figure out that part (but if you know, spare me the time).
I'm using an npm package react-scroll to scroll to that component once clicked. Then the component is set to "active". I will drop some code.
Nav bar section in the Home.js component..
return (
<div className="navBar">
<div className="navItem">
<Link
activeClass='active'
to="home"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
<h2>Home</h2>
</Link>
</div>
<div className="navItem">
<Link
activeClass='active'
to="projects"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
Projects
</Link>
</div>
<div className="navItem">
<Link
activeClass='active'
to="mission"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
Mission
</Link>
</div>
<div className="navItem">
<Link
activeClass='active'
to="about"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
About
</Link>
</div>
<div className="navBar">
<Link
activeClass='active'
to="contact"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
Contact
</Link>
</div>
</div>
My component sitting right beneath.
<Buddy />
Each component on my SPA/Portfolio has an id that the on my nav bar looks to go to.
//Projects.js
const Projects = () => {
return (
<div className="projectsComponent" id="projects">
</div>
)
}
So when it scrolls to the component, it sets that div? or component? to active.
// back in Home.js
<div className="navItem">
<Link
activeClass='active' <-----------
to="projects"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
Projects
</Link>
</div>
I just want to set whatever I need to, into a variable in Home.js to pass down as a prop to <Buddy />. Thanks, guys! Remember it's my first question ever! Be nice!
** If you have a better idea, like when the scroll reaches that component, set the index of my carousel to 1,2,3.. let me know too. Thanks
*** I will also include my <SpeechCarousel /> component here. It lives in my <Buddy /> component and ill pass another prop to it. Thanks again.
import React, {useState} from 'react'
import Carousel from 'react-bootstrap/Carousel'
import "../styles/css/Buddy.css"
const SpeechCarousel = () => {
const [index, setIndex] = useState(0);
const handleSelect = (selectedIndex, e) => {
setIndex(selectedIndex);
};
return (
<div id="carousel2">
<Carousel activeIndex={index} onSelect={handleSelect} interval={null}>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
</Carousel>
</div>
)
}
export default SpeechCarousel;

How to add active className in nextjs

I am new to Nextjs. I have to have an active className when a nav-link is selected. I am using Nextjs+react-bootstrap in my project. The feature I want to implement is when someone clicks on a specific link it's colour should be changed
my Navbar component looks like this -
import React from "react";
import { Navbar, Nav, Button } from "react-bootstrap";
import Link from "next/link";
import "../../styles/Header.module.css";
const Header = () => {
return (
<div className="header">
<Navbar expand="lg">
<Link href="/">
<Navbar.Brand style={{ padding: "8px 50px" }}>
<img
src="/logo.svg"
left="60px"
top="25px"
width="112px"
height="23px"
className="d-inline-block align-top"
alt="Openhouse logo"
/>
</Navbar.Brand>
</Link>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav" className="justify-content-end">
<Nav className="ml-auto">
<Link href="/classes" passHref>
<Nav.Link style={{ padding: "8px 50px" }}>Classes</Nav.Link>
</Link>
<Link href="/clubs" passHref>
<Nav.Link style={{ padding: "8px 50px" }}>Clubs</Nav.Link>
</Link>
<Link href="/aboutUs" passHref>
<Nav.Link style={{ padding: "8px 50px" }}>AboutUs</Nav.Link>
</Link>
</Nav>
<Button variant="warning" size="sm">
Chat with us
</Button>
</Navbar.Collapse>
</Navbar>
</div>
);
};
export default Header;

This special version of the Link tag is called NavLink and adds styling attributes to the rendered element when it matches the current URL
The class is given to the element when it is active by writing:
<NavLink to="/about" activeClassName="active">
About
</NavLink>'