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
Related
When I expand the navBar by clicking the menu button, I want the dropdown has full height(100vh etc), the UI should be like this:

This is the current UI in mobile:
How can I do it?
App.js
import React from "react";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import NavDropdown from "react-bootstrap/NavDropdown";
import Container from "react-bootstrap/Container";
import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.scss";
function Header(props) {
return (
<>
<Navbar bg="light" expand="lg">
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">
Another action
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">
Something
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">
Separated link
</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<div>content</div>
</>
);
}
export default Header;
Codesandbox:
https://codesandbox.io/s/fervent-leftpad-3sejn?file=/src/App.js
change css :
#media(max-width:600px) {
.navbar {
min-height: 100vh;
align-items: flex-start;
}
}
I'm trying to figure out a way to show my city current temperature in React's Navbar through React Open Weather but I'm a beginner in web development and don't know how to implement it, I don't know if this is possible in the first place so I asked first, this is what I've developed so far in my navbar code.
import React, {useState} from 'react';
import Modal from 'react-bootstrap/Modal'
import 'bootstrap/dist/css/bootstrap.min.css'
import {Navbar,Nav,NavDropdown} from 'react-bootstrap';
import {NavLink} from 'react-router-dom';
import './NavBar.css';
export default function NavBar (){
const [show, setShow] = useState(false)
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return(
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Navbar.Brand as={NavLink} to= '/' className={"px-3"}>
<h4 className={"fontSize4"}>Home</h4>
</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<NavDropdown title= "Tools" className={"px-3 h3"} id="collasible-nav-dropdown">
<NavDropdown.Item as={NavLink} to= '/ToDoList'>
<h3 className={"fontSize3"}>To-Do List</h3>
</NavDropdown.Item>
<NavDropdown.Item as={NavLink} to= '/Calculator'>
< h3 className={"fontSize3"}>Calculator</h3>
</NavDropdown.Item>
<NavDropdown.Item as={NavLink} to= '/Countdown'>
< h3 className={"fontSize3"}>Countdown</h3>
</NavDropdown.Item>
<NavDropdown.Item as={NavLink} to= '/Stopwatch'>
< h3 className={"fontSize3"}>Stopwatch</h3>
</NavDropdown.Item>
<NavDropdown.Item as={NavLink} to= '/Notepad'>
<h3 className={"fontSize3"}>Notepad</h3>
</NavDropdown.Item>
<NavDropdown.Item>
<h3 className={"fontSize3"} onClick={handleShow}>Clock</h3>
<Modal show={show} centered size="lg" onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Time</Modal.Title>
</Modal.Header>
<h1>It is currently {new Date().toLocaleTimeString()}.</h1>
</Modal>
</NavDropdown.Item>
<NavDropdown.Item as={NavLink} to= '/Calendar'>
<h3 className={"fontSize3"}>Calendar</h3>
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item as={NavLink} to= '/Scheduled'>
<h3 className={"fontSize3"}>Scheduled</h3>
</NavDropdown.Item>
</NavDropdown>
</Nav>
<Nav>
<Nav.Link as={NavLink} to= '/Login' className={"px-3"}>
<h4 className={"fontSize4"}>Login / Sign Up</h4>
</Nav.Link>
<Nav.Link as={NavLink} to= '/AboutUs' className={"px-3"} >
<h4 className={"fontSize4"}>About us</h4>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
And this is how it looks
Thanks for the help
This is what I did:
const [weather, setWeather] = useState(null);
const url = 'https://api.openweathermap.org/data/2.5/weather?lat=50.054810&lon=19.927839&appid={API_KEY}&units=metrics';
let temperature;
useEffect(() => {
axios.get(url).then((response) => {
setWeather(response.data);
temperature = response.data.main.temp;
});
}, []);
And then I put {Math.floor((temperature)-273.15)}°C in a div inside my Navbar. It works, although it's definitely not the cleanest way. :-)
I have tried everything possible(inline, another CSS file you name it) but nothing seems to work.
I am trying to make a Navbar using React bootstrap.
This one: https://react-bootstrap.github.io/components/navbar/
Here's my code:
import React from 'react';
import './Navbar.css';
import Logo from './Logo.png';
import { Nav, Navbar, NavDropdown, FormControl, Button, Form } from "react-bootstrap";
const Nabar=()=>{
return(
<Navbar fixed="top" expand="sm" >
<Navbar.Brand href="/">
<img
src={Logo}
style={{width:'10em', Height:'10em'}}
className="d-inline-block align-top"
alt="Youth Math Logo"
/>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
//------------------------Over Here-----------------------------------------------------------------
<Nav.Link className="home" href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
);
}
export default Nabar;
I want to change it's color from default to white.
Try this:
.nav-link{
font-family: 'Roboto', sans-serif;
color: #2699FB !important;
}
inside "{}" put what you want, do not forget the "!important"
Instead of <Nav.Link href="#link">Link</Nav.Link>
write
<Nav.Link href="#link"><h4 className="linkText">Link</h4></Nav.Link>
Followed by CSS
.linkText{ color: white ; }
This may be too late. But may help someone in the future. Override this bootstrap CSS class.
.navbar-dark .navbar-nav .nav-link
{
color:#fff;
}
Late to the party but this done the trick for me
<Nav.Link href="/" style={{color:"white"}}>Log out</Nav.Link>
I have used react Bootstrap navbar also used react-scroll for smooth navigation. It's working fine but navbar is not collapsing when clicking any nav item in the responsive mode.
Packages
import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import { Link } from "react-scroll";
import { LinkContainer } from "react-router-bootstrap";
import { Navbar, Container, NavDropdown, Nav, Dropdown } from "react-bootstrap";
Navbar
<Navbar
sticky="top"
id="navbar"
bg="light"
expand="lg"
className="navbar navbar-expand-lg navbar-light bg-light"
collapseOnSelect={true}
>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Link
activeClass="active"
to="features"
spy={true}
smooth={true}
offset={-70}
duration={800}
className="nav-link"
onClick={this.closeNavbar}
>
Features
</Link>
<Link
activeClass="active"
to="about"
spy={true}
smooth={true}
offset={-70}
duration={800}
className="nav-link"
>
About
</Link>
</Nav>
</Navbar.Collapse>
</Navbar>
Had the same issue. I found that "collapseOnSelect" works if we add "eventKey" for Nav.Link item
Example:
import { Link } from 'react-router-dom';
import { Nav, Navbar} from 'react-bootstrap';
<Navbar collapseOnSelect expand="lg">
<Navbar.Toggle />
<Navbar.Collapse>
<Nav className="mr-auto d-block">
<Nav.Item>
<Nav.Link eventKey="1" as={Link} to="/Home">
Home
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="2" as={Link} to="/Contant">
Page Contant
</Nav.Link>
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Navbar>
I had the same issue and resolved it by putting Bootstrap's Nav.Link back in. Here's how it would work based on your code :
<Navbar sticky="top" id="navbar"className="navbar" collapseOnSelect bg="light expand="lg">
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link>
<Link
activeClass="active"
to="features"
spy={true}
smooth={true}
offset={-70}
duration={800}
className="nav-link"
>
Features
</Link>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
it's know issue in React Bootstrap that when we clicked on menu item it will not hide the menu automatically, below mentioned code help you to achieve the same.
An easy workaround that doesn't require jQuery:
<DropdownButton title={buttonTitle} onSelect={() => null}>
or if you're still using ES5:
<DropdownButton title={buttonTitle} onSelect={function() {}}>
It doesn't seem to matter what the onSelect callback returns.
I had the same problem, found a fix.
It is must to add expand attribute to your Navbar Component.
<Navbar variant="dark" expand="lg">
just use eventKey="2" inside <Nav.link/> . It will works fine for react js .
The navbar buttons are not working. When I click on them, they just work when I click open in a new page.
export default class DefaultNavBar extends Component {
render() {
return (
<div className="navbar-fixed-top">
<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
GatherUp
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="/">Home</NavItem>
<NavItem eventKey={2} href="/event">Event</NavItem>
<NavItem eventKey={3} href="/signup">Sign Up</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
);
}
}