I am facing the problem, when trying to use the navbar colapse button from Bootstrap, it doesn't work.
I think it has something to do with my page loading the jQuery library or something, though I don't understand. In node modules I found all bootstrap js files. I am also importing them in my index.js file.
Here is my code.
import React, {Component} from 'react';
import AuthenticationService from '../service/AuthenticationService';
import { Sitemap } from '../settings/Sitemap';
class NavigationComponent extends Component {
render() {
return(
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container">
Fit Vision
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#toggler" aria-controls="toggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="toggler">
<ul className="navbar-nav">
{Sitemap.map((item, index) => {
return (
<li className="nav-item" key={index}>
<a className="nav-link" href={item.url}>{item.title}</a>
</li>
)
})}
</ul>
<ul className="navbar-nav justify-content-end">
<li className="nav-item">
<a className="nav-link" href="/login">Login</a>
</li>
<li className="nav-item">
<a className="nav-link" href="/" onClick={AuthenticationService.logout}>Logout</a>
</li>
</ul>
</div>
</div>
</nav>
)
}
}
export default NavigationComponent;
My index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
first of all, you have some classes that should be converted into className.
Second, you should know that bootstrap depends on jquery.
Please npm install jquery in the directory.
Now looking at the index.js file you should next files imported :
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.bundle';
Your Navigation.js should look like this:
import React, {Component} from 'react';
import AuthenticationService from '../service/AuthenticationService';
import { Sitemap } from '../settings/Sitemap';
class NavigationComponent extends Component {
render() {
return(
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container">
Fit Vision
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#toggler" aria-controls="toggler" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="toggler">
<ul className="navbar-nav">
{Sitemap.map((item, index) => {
return (
<li className="nav-item" key={index}>
<a className="nav-link" href={item.url}>{item.title}</a>
</li>
)
})}
</ul>
<ul className="navbar-nav justify-content-end">
<li className="nav-item">
<a className="nav-link" href="/login">Login</a>
</li>
<li className="nav-item">
<a className="nav-link" href="/" onClick={AuthenticationService.logout}>Logout</a>
</li>
</ul>
</div>
</div>
</nav>
)
}
}
export default NavigationComponent;
Also i would suggest to use function components , it should be a simple change :
import React from 'react';
import AuthenticationService from '../service/AuthenticationService';
import { Sitemap } from '../settings/Sitemap';
function NavigationComponent() {
return(
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container">
Fit Vision
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#toggler" aria-controls="toggler" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="toggler">
<ul className="navbar-nav">
{Sitemap.map((item, index) => {
return (
<li className="nav-item" key={index}>
<a className="nav-link" href={item.url}>{item.title}</a>
</li>
)
})}
</ul>
<ul className="navbar-nav justify-content-end">
<li className="nav-item">
<a className="nav-link" href="/login">Login</a>
</li>
<li className="nav-item">
<a className="nav-link" href="/" onClick={AuthenticationService.logout}>Logout</a>
</li>
</ul>
</div>
</div>
</nav>
)
}
export default NavigationComponent;
Related
I am doing the basic react app and prop type error has occurred in my application
./src/component/Navbar.js
Cannot find file: 'index.js' does not match the corresponding name on disk: '.\node_modules\Prop-types\prop-types'.
import React from "react";
import PropTypes from 'Prop-types';
export default function Navbar(props) {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<a className="navbar-brand" href="/">{props.title}</a>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li className="nav-item">
<a className="nav-link" href="/">{props.AboutText}</a>
</li>
</ul>
<form className="d-flex">
<input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
<button className="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
)
}
Navbar.propTypes = {
title: PropTypes.string,
aboutText: PropTypes.string
}
Navbar.defaultProps = {
title: 'Set title here',
aboutText: ''
};
The name of your import is slightly wrong. Javascript imports are case sensitive, so it should be following.
import PropTypes from 'prop-types';
Notice the case of prop-types.
Also ensure prop-types is present in your package.json as a dependency already.
Refer the installation guide for reference.
Looks like you are importing prop-types incorrectly. p should be in lower case in prop-types. Please update your import as:
import PropTypes from "prop-types";
I am stuck with a problem. When I am trying to click on Signup button which is in inside the Signin dropdown, it's not open new page, it is came below the footer. I want to open new page when I click on signup button.
Can anyone tell me how can I do it
App.js file
This is the app.js file where I create my route
import './App.css';
import Navbar from './components/Navbar';
import Banner from './components/Banner';
import Cards from './components/Cards';
import Chat from './components/Chat';
import Footer from './components/Footer';
import Signup from './components/Signup';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
const App = () => {
return (
<BrowserRouter>
<div className="App">
<Navbar />
<Banner />
<Cards />
<Chat />
<Footer />
<Switch>
<Route exact path='/signup' component={Signup} />
</Switch>
</div>
</BrowserRouter>
);
}
export default App;
Navbar.js
This is the navbar.js file
import React from 'react';
import './Navbar.css';
import {Link} from 'react-router-dom';
const Navbar = () => {
return (
<div className="container">
<nav class="navbar navbar-expand-lg navbar-light ">
<a class="navbar-brand" href=""><img src="https://secure.skypeassets.com/content/dam/scom/images/logos/re1mu3b.png" alt="coco-cola" className="coco mr-3" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="navbar-brand ml-3" href=""><b>Skype</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skype to Phone</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skype Number</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Meet Now</a>
<a class="dropdown-item" href="#">Skype Manager</a>
<a class="dropdown-item" href="#">Skype with Alexa</a>
<a class="dropdown-item" href="#">Skype for content Creator</a>
<a class="dropdown-item" href="#">Skype For Business</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Get Help
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Skype Support</a>
<a class="dropdown-item" href="#">Blog</a>
<a class="dropdown-item" href="#">Community</a>
<a class="dropdown-item" href="#">About Skype</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item ">
<a class="nav-link" href="#">Hosting a meeting</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Sign In
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#" style={{textDecoration:'none'}}><i class="fas fa-user"></i> My Account</a>
<Link to='/signup' class="dropdown-item" href="#" style={{textDecoration:'none'}}>Sign Up</Link>
</div>
</li>
</ul>
</div>
</nav>
</div>
)
}
export default Navbar;
Signup.js
this is the page where i want to redirect.
import React from 'react'
const Signup = () => {
return (
<div>
<h1>Hello</h1>
</div>
)
}
export default Signup;
You're misusing react-router-dom within App.js. Any components that you add to App.js outside of a switch will display no matter what. The switch is just used to change what component is being rendered within the tag. So in your App.js code, you are guaranteeing that your page will always have Navbar, Banner, Cards, Chat, and Footer rendered above Signup. react-router-dom is better suited for creating a general page layout in App.js, then rendering different components within it.
For this, you'll want to create two files:
Homepage.js
Signup.js
First, modify App.js and remove any components that will not be universal to every page on your site. Maybe you'll only want to keep the header:
App.js
const App = () => {
return (
<BrowserRouter>
<div className="App">
<Navbar />
<!-- You'll insert your switches here -->
<Footer />
</div>
</BrowserRouter>
);
}
You'll use your Homepage.js file to add in components unique to the homepage:
const Homepage = () => {
return (
<div className="Homepage">
<Banner />
<Cards />
<Chat />
</div>
);
}
You can implement your Signup page however you want. Then modify your new App.js to include the switches:
App.js
const App = () => {
return (
<BrowserRouter>
<div className="App">
<Navbar />
<Switch>
<Route exact path='/homepage' component={Homepage} />
<Route exact path='/signup' component={Signup} />
</Switch>
<Footer />
</div>
</BrowserRouter>
);
}
This design will guarantee that every page has a header and footer, as those are the two components outside of switches in App.js.
I have created this Navbar using boostsrap 4, but i want it to get collapse when i click on the link,
Any way to do this? Thanks.
please help me i'm stuck here.
import moon from '../Images/moon.ico'
import { NavLink } from 'react-router-dom'
const NavBar = () => {
return(
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<NavLink to='/' className="navbar-brand"><img src={moon} alt="logo" className="logo-img"/></NavLink>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item">
<NavLink to="/" className="nav-link">Home</NavLink>
</li>
<li className="nav-item">
<NavLink to="/about" className="nav-link">About</NavLink>
</li>
<li className="nav-item">
<NavLink to='/skill' className="nav-link">Skills</NavLink>
</li>
<li className="nav-item">
<NavLink to="/project" className="nav-link">Projects</NavLink>
</li>
</ul>
</div>
</nav>
)
}
export default NavBar```
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;