I am building a web app using React/Redux and Bootstrap4 (I am not reactstrap). The app has a navbar at the top of the page, however, when the navbar renders it is not aligned to the top of the browser but moved down (see below - note: there is another sidebar link above 'patients' that is being covered by the navbar)
I've been through my jsx and cannot figure out what is causing the navbar to not position correctly - it should be at the top and fixed when scrolling (see below).
I've listed the relevant code below (just the components' render funcitons) - if I've missed any relevant parts, comment and I will edit. The react app was built using create-react-app.
index.html
<html>
<head>
...
</head>
<body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>...required scripts...</script>
</body>
</html>
App.js
class App extends Component {
render() {
return (
<Provider store={store}>
<Router>
<div className="App">
<Route exact path="/login" component={LoginPage} />
<Route exact path="/dashboard" component={Dashboard} />
</div>
</Router>
</Provider>
);
}
}
Dashboard.js
class Dashboard extends Component {
render() {
return (
<>
<Navbar />
<div className="app-body">
<Sidebar path="dashboard" />
</div>
</>
);
}
}
Navbar.js
class Navbar extends Component {
onLogoutClick = e => {
e.preventDefault();
this.props.logoutUser();
};
render() {
const { user } = this.props.auth;
return (
<header className="app-header navbar">
<button className="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">
<span className="navbar-toggler-icon" />
</button>
<a href="#" className="navbar-brand">
<img src={logo} className="navbar-brand-full" height="35" alt="expo" />
<img src={sygnet} className="navbar-brand-minimized" height="30" width="30" alt="expo" />
</a>
<button className="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show" >
<span className="navbar-toggler-icon" />
</button>
<ul className="nav navbar-nav ml-auto">
<li className="nav-item dropdown px-3">
<a href="" className="nav-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >
{user.name}
</a>
<div className="dropdown-menu dropdown-menu-right">
<Link to="/profile" className="dropdown-item">
<i className="fa fa-user" />
Profile
</Link>
<button onClick={this.onLogoutClick} className="dropdown-item" style={{ cursor: 'pointer' }} >
<i className="fas fa-power-off" />
Logout
</button>
</div>
</li>
</ul>
</header>
);
}
}
Sidebar.js
return (
<div className="sidebar">
<nav className="sidebar-nav">
<ul className="nav">
<li className={liDashboard}>
<Link to="/dashboard" className={linkDashboard}>
<i className="nav-icon fas fa-fw fa-columns" /> Dashboard
</Link>
</li>
<li className={liPatients}>
<Link to="/patients" className={linkPatients}>
<i className="nav-icon fas fa-fw fa-users" /> Patients
</Link>
</li>
<li className={liInvoices}>
<Link to="/invoices" className={linkInvoices}>
<i className="nav-icon fas fa-fw fa-dollar-sign" /> Invoices
</Link>
</li>
<li className={liProfile}>
<Link to="/profile" className={linkProfile}>
<i className="nav-icon fas fa-fw fa-user" /> Profile
</Link>
</li>
<li className="nav-title"> Resources</li>
<li className={liDocuments}>
<Link to="/documents" className={linkDocuments}>
<i className="nav-icon fas fa-file" /> Documents
</Link>
</li>
<li className={liEducation}>
<Link to="/education" className={linkEducation}>
<i className="nav-icon fas fa-graduation-cap" /> Education
</Link>
</li>
</ul>
</nav>
<button className="sidebar-minimizer brand-minimizer" type="button" />
</div>
);
};
Related
I am using next.js in my pages folder
On the link localhost:3000/accounts
import React from "react";
import Link from "next/link";
const Account = () => {
return (
<div className="row">
<div className="col-md-3">
<ul className="list-group">
<Link className="list-group-item active" href="/accounts/oders"> My order history </Link>
<a className="list-group-item" href="#"> Transactions </a>
<a className="list-group-item" href="#"> Return and refunds </a>
<a className="list-group-item" href="#">Settings </a>
<a className="list-group-item" href="#"> My Selling Items </a>
<a className="list-group-item" href="#"> Received orders </a>
</ul>
<br/>
<a className="btn btn-light btn-block" href="#"> <i className="fa fa-power-off"></i> <span className="text">Log out</span> </a>
</div>
<div className="col-md-8">
{/* Here i want to render the next components */}
</div>
</div>
);
};
export default Account;
When click on the link oreder localhost:3000/accounts/order
<div className="col-md-8">
{/* Here i want to render the next components */}
</div>
I want to render the component here only just like we repeat the navbar and footer by app.js i want to render the account table on every page of the account related link
Here is the code of a component named topbar which refers to navbar of a page,
as soon as I save the page it appears to be blank.
Please help me to debug it as I am stuck for a while on it.
As soon as I comment the Link part , the page starts working instantly.
import { Link } from "react-router-dom";
import "./topbar.css";
export default function Topbar() {
const user = true;
return (
<div className="top">
<div className="topLeft">
<i className="topIcon fab fa-facebook-square"></i>
<i className="topIcon fab fa-instagram-square"></i>
<i className="topIcon fab fa-pinterest-square"></i>
<i className="topIcon fab fa-twitter-square"></i>
</div>
<div className="topCenter">
<ul className="topList">
<li className="topListItem">
<Link className="link" to="/">
HOME
</Link>
</li>
<li className="topListItem">ABOUT</li>
<li className="topListItem">CONTACT</li>
<li className="topListItem">
<Link className="link" to="/write">
WRITE
</Link>
</li>
{user && <li className="topListItem">LOGOUT</li>}
</ul>
</div>
<div className="topRight">
{user ? (
<Link className="link" to="/settings">
<img
className="topImg"
src="https://images.pexels.com/photos/1858175/pexels-photo-1858175.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
alt=""
/>
</Link>
) : (
<ul className="topList">
<li className="topListItem">
<Link className="link" to="/login">
LOGIN
</Link>
</li>
<li className="topListItem">
<Link className="link" to="/register">
REGISTER
</Link>
</li>
</ul>
)}
<i className="topSearchIcon fas fa-search"></i>
</div>
</div>
);
}
i want to go from one component to another component like i have a navbar that has navlinks i want to make the navbar name which is "pets forever" when i press on it it redirects me to the home page which is that is its code
import React from 'react';
import { NavLink } from 'react-router-dom';
import"./home.css";
const Home = () => {
return (
<React.Fragment>
<nav className="navbar navbar-expand-lg ">
<div className="container-fluid">
<i className="fas fa-paw fa-2x"></i>
<a className="navbar-brand " href="" >Pets Forever</a>
<div className="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul className="navbar-nav mr-auto">
{/*<li className="nav-item active">
<a className="nav-link" href="/home">Home <span className="sr-only">
(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Shop</a>
</li>
*/}
<li className="nav-item" >
<NavLink className="nav-link" to="#">About Us</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="#">Contact Us</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/login">Login</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="#">Sign Up</NavLink>
</li>
</ul>
</div>
</div>
</nav>
<div className="head-div">
<h1>Hi there!</h1>
<h1>Do you want buy me a toy?</h1>
<br/>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, quia?</p>
<p>Excepturi atque possimus quas qui temporibus ratione</p>
<button type="button" className="btn btn-warning">Shop Now</button>
</div>
</React.Fragment>
);
}
export default Home;
so i want to be redirected to this component whenever i press on the "pets forever" NavLink when i'm in another component like "/login" for ex
import React, { Component } from 'react';
import { NavLink,Navigate } from 'react-router-dom';
import "./login.css"
const Login = () => {
return (
<React.Fragment>
{/*this is the NavBar */}
<nav className="navbar navbar-expand-lg ">
<div className="container-fluid">
<i className="fas fa-paw fa-2x"></i>
<NavLink className="navbar-brand " to={<Navigate replace to = "/about"/>} >Pets
Forever</NavLink>
<div className="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul className="navbar-nav mr-auto">
<li className="nav-item">
<NavLink className="nav-link" to="#">About Us</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="#">Contact Us</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/login">Login</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="#">Sign Up</NavLink>
</li>
</ul>
</div>
</div>
</nav>
{/*this is the form of sign in */}
<main className="form-signin">
<form>
<div className="upper-div">
<i className="fas fa-paw fa-2x"></i>
<NavLink className="navbar-brand " to="" >Pets Forever</NavLink>
</div>
<div className="form-floating">
<input type="email" className="form-control" id="floatingInput"
placeholder="name#example.com"/>
<label htmlFor="floatingInput">Email address</label>
</div>
<div className="form-floating">
<input type="password" className="form-control" id="floatingPassword"
placeholder="Password"/>
<label htmlFor="floatingPassword">Password</label>
</div>
<div className="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"/> Remember me
</label>
</div>
<button className="w-100 btn btn-lg btn-primary" type="submit">Sign
in</button>
<div className="icon-div">
<i className="fab fa-facebook fa-2x"></i>
<i className="fab fa-google fa-2x"></i>
<i className="fab fa-twitter fa-2x" ></i>
<i className="fab fa-youtube fa-2x"></i>
</div>
</form>
</main>
</React.Fragment>
);
}
export default Login;
Specify the path in to,
<nav>
<NavLink to="/">Home</NavLink>
<NavLink to="/about">petsforever</NavLink>
</nav>
Just set the to prop from NavLinkto the route that matches the component you want to be redirected.
...
<NavLink className="navbar-brand" to="/desired-route">Pets Forever</NavLink>
...
Check NavLink docs
add icon to header navBar
I am not getting that how to add icon on the most left in my NavBar.
This is a custom class of NavBar.js. I want an icon in this bar on the most left.
I have added the buttons with link and they are in the center of the nav bar
i want the icon .png to be appear to the most left in the navBar
Kindly help!!
import React, { Component } from 'react'
import { Link, withRouter } from 'react-router-dom'
class Navbar extends Component {
logOut (e) {
e.preventDefault()
localStorage.removeItem('usertoken')
this.props.history.push(`/`)
}
render () {
const loginRegLink = (
<ul className="navbar-nav">
<li className="nav-item">
<Link to="/login" className="nav-link">
Login
</Link>
</li>
<li className="nav-item">
<Link to="/my" className="nav-link">
my
</Link>
</li>
<li className="nav-item">
<Link to="/register" className="nav-link">
Register
</Link>
</li>
</ul>
)
const userLink = (
<ul className="navbar-nav">
<li className="nav-item">
<Link to="/profile" className="nav-link">
User
</Link>
</li>
<li className="nav-item">
<a href="#" onClick={this.logOut.bind(this)} className="nav-link">
Logout
</a>
</li>
</ul>
)
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark rounded">
<button className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbar1"
aria-controls="navbar1"
aria-expanded="false"
aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse justify-content-md-center"
id="navbar1">
<ul className="navbar-nav">
<li className="nav-item">
<Link to="/" className="nav-link">
Home
</Link>
</li>
</ul>
{localStorage.usertoken ? userLink : loginRegLink}
</div>
</nav>
)
}
}
export default withRouter(Navbar)
```
App.js
import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";
class Navbar extends Component {
logOut(e) {
e.preventDefault();
localStorage.removeItem("usertoken");
this.props.history.push(`/`);
}
render() {
const loginRegLink = (
<ul className="navbar-nav">
<li className="nav-item">
<Link to="/login" className="nav-link">
Login
</Link>
</li>
<li className="nav-item">
<Link to="/profile" className="nav-link">
Profile
</Link>
</li>
<li className="nav-item">
<Link to="/register" className="nav-link">
Register
</Link>
</li>
</ul>
);
const userLink = (
<ul className="navbar-nav">
<li className="nav-item">
<Link to="/profile" className="nav-link">
User
</Link>
</li>
<li className="nav-item">
<Link onClick={this.logOut.bind(this)} className="nav-link">
Logout
</Link>
</li>
{/* Dropdown */}
<li className="nav-item dropdown">
<Link
className="nav-link dropdown-toggle"
id="navbardrop"
data-toggle="dropdown"
>
Dropdown link
</Link>
<div className="dropdown-menu">
<Link className="dropdown-item" href="#">
Link 1
</Link>
<Link className="dropdown-item" href="#">
Link 2
</Link>
<Link className="dropdown-item" href="#">
Link 3
</Link>
</div>
</li>
</ul>
);
return (
<nav className="navbar navbar-expand-md bg-dark navbar-dark">
<Link className="navbar-brand">
<img
src="https://via.placeholder.com/50"
alt="Logo"
className="img-thumbnail"
/>
</Link>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar"
>
<span className="navbar-toggler-icon" />
</button>
<div
className="collapse navbar-collapse justify-content-md-center"
id="collapsibleNavbar"
>
{localStorage.usertoken ? userLink : loginRegLink}
</div>
</nav>
);
}
}
export default withRouter(Navbar);
index.js
import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Nav from "./App";
const App = props => (
<Router>
<div>
<Nav />
<Route exact path="/" />
</div>
</Router>
);
render(<App />, document.getElementById("root"));
Hi please check the Link for add icon in most left.
I'm working on a reactjs front end, and in my app.js i have this following code :
import React from 'react';
import {BrowserRouter as Router,Route,Switch, Link} from 'react-router-dom';
import Login from './Components/Login.component';
import Register from './Components/Register.component';
import Home from './Components/Home.component';
import Services from './Components/Services.component';
import 'bootstrap/dist/css/bootstrap.css';
import './App.css';
function Index() {
return(
<div className="container-fluid index-container" style={{backgroundImage:"url(indexBackground.png)"}}>
<nav className="navbar navbar-expand-lg navbar-light index-navbar">
<a className="navbar-brand" href="#">
<img className="img-fluid" width="110" src="logo.png" alt="logo"></img>
</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<a className="nav-link" href="#">Acceuil</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Actualités</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Nos services</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Nos vehicules</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Contactez-nous</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Blog</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Se connecter</a>
</li>
</ul>
</div>
</nav>
<div id="index-container-x" className="row d-flex align-items-center" style={{display:"none"}}>
<div className="col-lg-6 index-container-x justify-content-center">
<h1 className="white-heading">Découvrez la location longue durée nouvelle génération</h1>
<hr style={{borderColor:"#fff"}} />
<Link className="btn btn-primary" to="/Register">S'abonner</Link>
</div>
</div>
</div>
)
}
function App() {
return (
<Router>
<Switch>
<Route exact path="/">
<Index />
</Route>
<Route path="/Login">
<Login />
</Route>
<Route path="/Register">
<Register />
</Route>
<Route path="/Home">
<Home />
</Route>
<Route path="/Services">
<Services />
</Route>
</Switch>
</Router>
);
}
export default App;
I also have a home component with the following code :
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import '../App.css';
import {BrowserRouter as Router } from 'react-router-dom';
import Navbar from './Navbar.component';
import Chart from './Chart.component';
class Home extends Component {
render() {
return(
<Router>
<Navbar />
<Chart />
</Router>
)
}
}
export default Home;
Here is my navbar component :
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
import '../App.css';
import {BrowserRouter as Router,Route, Link } from 'react-router-dom';
class Navbar extends Component {
render() {
return(
<nav className="navbar navbar-expand-lg navbar-light blue-nav">
<Link className="navbar-brand" to="/Home">
<img alt="nothing" width="110" src="logo.png"></img>
</Link>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item">
<Link className="nav-link" to="/Home"><i className="fas fa-tachometer-alt"></i> Tableau de bord</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/Services"><i className="fas fa-hand-holding-heart"></i> Nos services</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/Contracts"><i className="fas fa-folder-open"></i> Mes contrats</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/Vehicles"><i className="fas fa-car"></i> Mes vehicules</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/Notifications"><i className="fas fa-bell"></i> Notifications <span className="badge badge-danger">4</span></Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/Support"><i className="fas fa-question-circle"></i> Aide</Link>
</li>
</ul>
<ul className="navbar-nav ml-auto">
<li className="nav-item dropdown">
<Link className="nav-link dropdown-toggle" to="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i className="fas fa-user-cog"></i> Compte
</Link>
<div className="dropdown-menu dropdown-menux" aria-labelledby="navbarDropdown">
<Link className="dropdown-item" to="#"><i className="fas fa-user-circle"></i> Modifier mon profile</Link>
<Link className="dropdown-item" to="#"><i className="fas fa-lock"></i> Sécurité</Link>
<Link className="dropdown-item" to="#"><i className="fas fa-cogs"></i> Paramètres</Link>
<div className="dropdown-divider"></div>
<Link className="dropdown-item" to="#"><i className="fas fa-power-off"></i> Se déconnecter</Link>
</div>
</li>
</ul>
</div>
</nav>
)
}
}
export default Navbar;
Now what i want to do is when i click the LINK in the navbar (services Or Home) i want that route's component to be rendered, but the problem i have in the browser link it showes localhost:3000/Services but the content of Home component still shows up like there was never a new page navigation.
Here is my services component :
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import '../App.css';
import {BrowserRouter as Router } from 'react-router-dom';
import Navbar from './Navbar.component';
class Services extends Component {
constructor(props){
super(props);
}
render() {
return(
<Router>
<Navbar />
</Router>
)
}
}
export default Services;
Here is some images :
1st image is for the Home before the click of the Link :
2nd image is for the Services page after the link is clicked : (no services content)
You need to move Navbar to main App.js and don't use Router inside Router (i.e. Home and Services pages)
function App() {
const key = Date.now();
return (
<Router>
<Navbar />
<Switch>
<Route key={key} exact path="/">
<Index />
</Route>
<Route key={key} exact path="/Login">
<Login />
</Route>
<Route key={key} exact path="/Register">
<Register />
</Route>
<Route key={key} exact path="/Home">
<Home />
</Route>
<Route key={key} exact path="/Services">
<Services />
</Route>
</Switch>
</Router>
);
}
export default App;
class Home extends Component {
render() {
return(<Chart />)
}
}
export default Home;
class Services extends Component {
render() {
return(<ServciesContent />)
}
}
export default Home;