How do I create a NavBar using React Boostrap in JS? - javascript

I am trying to create a boostrap react navbar, I am following a guide and this code SHOULD be working but it isn't. Instead it only displays the "database" text and not the navbar. Please do keep in mind that I know there are different ways of creating ne but I want to fix this code. Any help would be greatly appreciated!
App.js:
import './App.css';
import {Home} from './Home';
import {Student} from './Student';
import {Professor} from './Professor';
import {Course} from './Course';
import {Navigation} from './Navigation';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
function App() {
return (
<Router>
<div className="container">
<h3 className="m-3 d-flex justify-content-center">
Database
</h3>
<Navigation/>
<Routes>
<Route path='/' component={Home} />
<Route path='/student' component={Student}/>
<Route path='/professor' component={Professor}/>
<Route path='/course' component={Course}/>
</Routes>
</div>
</Router>
);
}
export default App;
Navigation.js:
import React,{Component} from 'react';
import {NavLink} from 'react-router-dom';
import {Navbar, Nav} from 'react-bootstrap';
export class Navigation extends Component
{
render()
{
return
{
<Navbar bg="dark" expand="lg">
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav>
<NavLink className="d-inline p-2 bg-dark text-white" to="/">
Home
</NavLink>
<NavLink className="d-inline p-2 bg-dark text-white" to="/student">
Students
</NavLink>
<NavLink className="d-inline p-2 bg-dark text-white" to="/professor">
Professors
</NavLink>
<NavLink className="d-inline p-2 bg-dark text-white" to="/course">
Courses
</NavLink>
</Nav>
</Navbar.Collapse>
</Navbar>
}
}
}

return method inside class should have parenthesis instead of curly brackets.
I fixed and added the answer. Replace Navigation.js code by following.
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import { Navbar, Nav } from 'react-bootstrap';
export class Navigation extends Component {
render() {
return (
<Navbar bg="dark" expand="lg">
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav>
<NavLink className="d-inline p-2 bg-dark text-white" to="/">
Home
</NavLink>
<NavLink className="d-inline p-2 bg-dark text-white" to="/student">
Students
</NavLink>
<NavLink className="d-inline p-2 bg-dark text-white" to="/professor">
Professors
</NavLink>
<NavLink className="d-inline p-2 bg-dark text-white" to="/course">
Courses
</NavLink>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}

Related

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.

while clicked on navbar button url is change but Content is not load in react js

Whenever i clicked on button url is change but content doesn't change and one more thing if i use <a> tag in exchange of <Link> tag then obviously page loading but content also load and update
but using <Link> tag it is not load data but url value is update so, please give me a solution for this
App.js
import "./App.css";
import "../node_modules/bootstrap/dist/css/bootstrap.css";
import Home from "./component/pages/Home";
import Contect from "./component/pages/Contect";
import About from "./component/pages/About";
import Navbar from "./component/layout/Navbar";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import React from "react";
function App() {
return (
<Router>
<Navbar title="title1" />
<Switch>
<Route exact path="/Contect" component={Contect}></Route>
<Route exact path="/" component={Home}></Route>
<Route exact path="/About" component={About}></Route>
</Switch>
</Router>
);
}
export default App;
Navbar.js
import React from "react";
import { Link } from "react-router-dom";
import {} from "react-router-dom";
const Navbar = (props) => {
return (
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<div className="container">
<Link class="navbar-brand bg-light" to="/contect">
{props.title}
</Link>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<Link class="nav-link bg-light" to="/">
Home
</Link>
</li>
<li class="nav-item active">
<Link class="nav-link bg-light" to="/About">
About
</Link>
</li>
</ul>
</div>
</div>
</nav>
);
};
export default Navbar;
Home.js
import React from "react";
const Home = () => {
return (
<>
<div className="container">
<div className="py-4">
<h1> Home page </h1>
</div>
</div>
</>
);
};
export default Home;
About.js and Contect.js is same as Home.js
<Router>
<Navbar title="title1" />
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/Contect" component={Contect}/>
<Route path="/About" component={About}/>
</Switch>
</Router>

Why doesn't link to a specific section id of navlink using react router dom?

I am trying to link a section ID using NavLink of react-router-dom but the link is requested to the server but does not link the specific id.
I want to link section Id with Navlink so that I can easily call the Id by clicking on the Navlink.
*Navbar.js*
import React from "react";
import "./Navbar.css";
import { NavLink } from "react-router-dom";
const Navbar = () => {
return (
<>
<nav>
<div className='container spaceB flex'>
<div className='leftSide'>
<NavLink className='navLink' to={"/"}>
<h1 className='logoH'>{"<Rajib/>"}</h1>
</NavLink>
</div>
<div className='rightSide'>
<ul className='flex'>
<NavLink className='navLink' to='/#intro'>
<li>About</li>
</NavLink>
<NavLink className='navLink' to='/#skills'>
<li>Skills</li>
</NavLink>
<NavLink to='/#works' className='navLink'>
<li>Works</li>
</NavLink>
</ul>
<NavLink className='navLink' to='/#contact'>
<button className='btn'>Contact</button>
</NavLink>
</div>
</div>
</nav>
</>
);
};
export default Navbar;
*App.js*
import "./App.css";
import Intro from "./components/common/Intro";
import Navbar from "./components/common/Navbar";
import Services from "./components/common/Skills";
import Works from "./components/common/Works";
import Contact from "./components/common/Contact";
function App() {
return (
<>
<header>
<Navbar />
</header>
<main>
<Intro />
<Services />
<Works />
<Contact />
</main>
</>
);
}
export default App;
*index.js*
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "./index.css";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<BrowserRouter>
<Routes>
<Route path='/' exact element={<App />} />
</Routes>
</BrowserRouter>
);
Please suggest the best solution so that i can link the section by calling it's Id in NavLink when clicking the specific navmenu.

React router link not rendering to component

Hello i have done everything but i dnt know why still its not working. am using react and router latest version.Stil am not able to opening my contact page.I have tried everything to solve it but still am not able to do it?
Hello i have done everything but i dnt know why still its not working. am using react and router latest version.Stil am not able to opening my contact page.I have tried everything to solve it but still am not able to do it?
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import New from './components/Navbar';
import Home from './components/Home';
import About from './components/About';
import Services from './components/Services';
import Name from './components/pages/Name';
import { BrowserRouter as Router, Switch,Route,Link,Routes,Redirect} from "react-router-dom";
const App = () => {
return(
<>
<Router>
<New/>
<Switch>
<Route Path='/' exact component = {Home} />
<Route Path='/About' exact component = {About} />
<Route Path='/Services' exact component = {Services}/>
<Route Path='/Name' exact component = {Name}/>
<Route Path='/Home' exact component = {Home}/>
</Switch>
</Router>
</>
)
}
export default App;
Conatct.jsx
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import ReactDOM from 'react-dom';
function Contact () {
return (
<>
<h1>contact</h1>
</>
)
}
export default Contact;
Pages / Name.js (i have import Contact here)
import React from 'react';
import Contact from '../Contact'
export default function Name() {
return (
<>
<Contact />
</>
);
}
Navbar.js
import React from 'react';
import './Navbar.css'
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle';
import { Button,Container,Navbar,Nav,NavDropdown,NavLink } from 'react-bootstrap';
import {
BrowserRouter as Router, Switch,Route,Link,Routes,Redirect} from "react-router-dom";
const New = () => {
return (
<div>
<div className="container-fluid">
<div className="row">
<div className='col-10 mx-auto'>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<NavLink className="navbar-brand" to="/">Navbar</NavLink>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavDropdown">
<ul className="navbar-nav ms-auto mb-auto mb-lg-2">
<li className="nav-item">
<NavLink className="nav-link active" aria-current="page" to="/">Home</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/Services">Services</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/About">About</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/Contact">Contact</NavLink>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
);
};
export default New;
First thing, using lowercase only in routes because browser concerto to lowercase
Second thing you need create a link component for react-router, NavLink is only UI element, not a valid like for rect router
should using this
https://reactrouter.com/web/api/Link

React Router usage

I'm testing React Router in a project (It's one of my first times using it), and, for some reason the routes aren't working when i click the 'Links', but when I type the route directly in the url, and then refresh the page, it works, can someone help me with that?
Here's the code:
App Component
import React from "react";
import "./styles.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import NavBar from "./components/NavBar";
import ProductList from "./components/ProductList";
import Home from "./components/Home";
export default function App() {
return (
<div className="App">
<NavBar />
<Router>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/products" component={ProductList} />
</Switch>
</Router>
</div>
);
NavBar Component (For now, I haven't included the 'My Cart' in the Links)
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
function NavBar() {
return (
<nav className="navbar navbar-light bg-dark p-3">
<Router>
<Link to="/">
<i className="fas fa-gifts fa-2x text-light ml-2" />
</Link>
<Link to="/products" className="btn text-light bg-dark mr-2 ml-auto">
Products
</Link>
</Router>
<button className="btn text-light bg-dark">
<i className="fas fa-shopping-cart" />
My Cart
</button>
</nav>
);
}
export default NavBar;
This setup would work -
for App.js
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import NavBar from "./components/NavBar";
import ProductList from "./components/ProductList";
import Home from "./components/Home";
export default function App() {
return (
<div >
<Router>
<Route path="/" component={NavBar} />
<Route path="/" exact component={Home} />
<Route path="/products" exact component={ProductList} />
</Router>
</div>
);
}
for NavBar.js
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
function NavBar() {
return (
<nav className="navbar navbar-light bg-dark p-3">
<Link to="/">
<i className="fas fa-gifts fa-2x text-light ml-2" />
Home
</Link>
<Link to="/products" className="btn text-light bg-dark mr-2 ml-auto">
Products
</Link>
</nav>
);
}
export default NavBar;

Categories

Resources