Develop Reference

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

Show current temperature in React NavBar?

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. :-)

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>'

How to change <Nav.Link> text color in React?

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>

React bootstrap navbar collapse not working

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 .