This question already has an answer here:
Cannot apply any Bootstrap style in using React-bootstrap library
(1 answer)
Closed 5 years ago.
I'm trying to make a navbar using react-bootstrap, but when I render it I get this:
I'm not getting any error messages, and I can't find any documentation explaining what I've got, but clearly I'm doing something wrong. Any ideas?
This is the code I'm using:
import React from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap/lib/';
const Toolbar = () => {
return (
<Navbar staticTop collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
Brandname Goes Here
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1}>Contact Us</NavItem>
<NavItem eventKey={2}>About Us</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
export default Toolbar;
go to react-bootsrap getting started tab
and copy the link under the <!-- Latest compiled and minified CSS --> description into your index.html <head> tag, and if you installed react-bootstrap using npm, then you can import the navbar like so:
import { Navbar, Nav, NavItem } from 'react-bootstrap';
It is clear that you haven't imported bootstrap.min.css. Import it in your index.html as follows.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"
/>
I cannot recommend to use something like import 'react-bootstrap/*/*.css' because I am not sure which framework and which loaders(eg: webpack) you are using.
Related
I have code for react-bootstrap like this.
import React from 'react'
import { Link } from 'react-router-dom'
import { Navbar, NavbarBrand, NavItem, Nav } from 'react-bootstrap'
import './App.css'
import NavbarToggle from 'react-bootstrap/esm/NavbarToggle'
import Routes from './Routes'
import NavbarCollapse from 'react-bootstrap/esm/NavbarCollapse'
import { LinkContainer } from 'react-router-bootstrap'
function App() {
return (
<div className="App container">
<Navbar fluid collapseOnSelect>
<Navbar.Header>
<NavbarBrand>
<Link to="/">Scratch</Link>
</NavbarBrand>
<NavbarToggle />
</Navbar.Header>
<NavbarCollapse>
<Nav pullRight>
<LinkContainer to="/signup">
<NavItem>Signup</NavItem>
</LinkContainer>
<LinkContainer to="/login">
<NavItem>Sign</NavItem>
</LinkContainer>
</Nav>
</NavbarCollapse>
</Navbar>
<Routes />
</div>
)
}
export default App
it occurred errors. The errors message are
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Note: when I omitted Navbar.Header it worked correctly.
NavBar.Header was removed in release v1 of React-bootstrap. Basically, if you add this component, it primarily adds to the DOM a div with a class of navbar-header.
<div class="navbar-header"></div>
If you are curious to know or want to replicate its behavior, you can take a look at this answer: What does "navbar-header" class do in Bootstrap? or take a look at some outdated Bootstrap stylesheet (prior to v4).
If you have the leisure of updating your layout, take a look at the updated examples of React-bootstrap Nav here: https://react-bootstrap.github.io/components/navbar/#navbars
I'm currently developing a web application with React and react-bootstrap. Everything is runnning fine except the render process of my navigation area on the top of my webpage.
The problem looks as follows:
I want to display a element inside my navigation bar with a couple of elements. But everytime my page is displayed inside the web browser, the element Nav.Link isn't loaded and thus defined as undefined.
Hereis the corresponding file:
import React,{Component} from 'react';
import './HorizontalNavBar.css';
import atom from './res/atom.svg';
import file from './res/file_icon.svg';
import tag from './res/tag.svg';
import user from './res/user_icon.svg';
import {Navbar,Nav,NavDropdown,Form,FormControl} from 'react-bootstrap';
import { bootstrapUtils } from 'react-bootstrap/lib/utils';
class HorizontalNavBar extends React.Component
{
constructor(props)
{
super(props);
this.state =
{
actions:["Files","TagManager","Profile"],
};
}
render()
{
return(
<Navbar bg="dark" variant="dark" expand="lg">
<Navbar.Brand href="#">
<img
src={atom}
alt="Logo"/>
SciTag
</Navbar.Brand>
<Navbar.Collapse>
<Nav>
<Nav.Link href="#home">Home</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
export default HorizontalNavBar;
Here are a couple of things of solutions I've already tried out:
Checked the official documentation of react-bootstrap
Downloaded the Bootstrap Stylesheet again
Reconfigured webpack
Updated React to the latest stable version
Edit:
I've discovered the source of the error myself. While the latest documentation is explaining how developers can utilize react-bootstrap version 1.0.0-beta.5, I was using my < 1.0.0 version with the latest tutorials. Of course, this didn't work out because the components which are explained it the tutorials are not included in my setup. The solution was to download latest beta version and use the stylesheets from Bootstrap 4 and not Bootstrap 3.
Your issue is in the way you implemented it:
You put the NavLink in the Navbar.Collapse Wrapper. That Navbar.Collapse wrapper is part of ensuring a responsive behaviour of your navigation:
Use the expand prop as well as the Navbar.Toggle and Navbar.Collapse components to control when content collapses behind a button.
Please see here: https://react-bootstrap.github.io/components/navbar/
In fact, your NavLink item is there - but you do not see it because it is hidden unless you press the Navbar.Toggle item. Since you didn't implement the item for now, there is no way of seeing it at all.
Now you have two options: implementing the Navbar component without responsive behaviour or with it.
Option 1, without responsive behaviour (we removed the Navbar.Collapse wrapper):
<Navbar bg="dark" variant="dark" expand="lg">
<Navbar.Brand href="#">SciTag</Navbar.Brand>
<Nav>
<Nav.Link href="#home">Home</Nav.Link>
</Nav>
</Navbar>
Option 2, with responsive behaviour (we added the Navbar.Collapse wrapper with some options)
<Navbar collapseOnSelect bg="dark" variant="dark" expand="lg">
<Navbar.Brand href="#">SciTag</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse>
<Nav>
<Nav.Link href="#home">Home</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
Working sandbox: https://codesandbox.io/s/8l85rqqk8
error - React.Children.only expected to receive a single React element child.
There were quite a few questions with the same context, I tried those solutions but have not found a solution.
The Navbar of the website is what is giving me the error. There is a section over the Navbar which renders properly, when I try to render the Navbar below it throws the error.
import Link from 'next/link'
import Head from '../components/head'
import Download from '../components/nav'
import NavBar from '../components/header'
import Footer from '../components/footer'
import htmlContent from 'html-loader!../legacy/index.html'
const Homepage = () => (
<div>
<Head />
<Download/>
<NavBar />
<div dangerouslySetInnerHTML={{__html: htmlContent}} />
<Footer />
</div>
);
export default Homepage
The footer shows properly, head tag is for all the meta data etc(also works). Github link to all the code is-https://github.com/yohanelly/website-jsx/tree/master/components
The problem is with the whitespace between the Link and the a tag.
<Link href="#"> <a className="menu-links features">Features</a></Link>
should be either
<Link href="#"><a className="menu-links features">Features</a></Link>
or
<Link href="#">
<a className="menu-links features">Features</a>
</Link>
Read the Children in JSX section of the React docs for more info.
I develop react + meteor app, then I got error like this,
I try to add navigation https://react-bootstrap.github.io/components.html#navigation, get data in this tutorial . I try to add this const like below way
MainComponent
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import { Button } from 'react-bootstrap';
import AccountsUIWrapper from './AccountsUIWrapper.jsx';
// App component - represents the whole app
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
hideCompleted: false,
};
}
render() {
const navbarInstance = (
<Navbar>
<Navbar.Header>
<Navbar.Brand>
React-Bootstrap
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={1} href="#">Link</NavItem>
<NavItem eventKey={2} href="#">Link</NavItem>
<NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
<MenuItem eventKey={3.3}>Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey={3.4}>Separated link</MenuItem>
</NavDropdown>
</Nav>
</Navbar>
);
return (
<div>
{navbarInstance}
<div className="container">
<div className="row">
<div className="navbar nav-inline">
<AccountsUIWrapper />
</div>
</div>
<header>
<h1>School Attendance</h1>
<h3>Lecturer Report</h3>
</header>
<h4>This is home</h4>
</div>
</div>
);
}
}
but I got bellow error. and there reason as like me.
There add some import
import { Button, Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
like this then vanish the error, but I got like this
I want to correct way to Navbar add
The classes you call in render are not defined.
Where you have import {Button} from 'react-bootstrap' you need to import every component that you plan on using in your file ( that is part of that framework ).
The solution would be adding Navbar, like so:
import { Button, Navbar } from 'react-bootstrap'
Also have you included Bootstrap styles in your project?
https://react-bootstrap.github.io/getting-started/introduction
firstly install react bootstrap
npm install react-bootstrap bootstrap
// or use yarn
yarn add react-bootstrap bootstrap
also you need to import Navbar as well you can use this code
import Navbar from 'react-bootstrap/Navbar'
// or
import { Navbar } from 'react-bootstrap'
for the styling you need to add bootstrap styles. How and which Bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
So I just dived into the react-bootstrap library today to implement a navbar.
The page with code and demo I looked into: https://react-bootstrap.github.io/components/navbar/#navbars-mobile-friendly
Notice how the examples are already nicely styled. I tried doing pretty much the same, but it looks depressing and unstyled at all, not even the bg is working.
My code:
import React from "react";
import {Nav, Navbar} from 'react-bootstrap'
import './style.css';
import logo from '../../assets/logo.png';
function LoginNav() {
return (
<Navbar expand="lg" bg="dark" variant="dark">
<Navbar.Brand>
<img id="logo"
className="d-inline-block align-top"
src={logo} alt="logo"
/>
</Navbar.Brand>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Login</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
};
export default LoginNav;
My CSS doesn't do anything other than resizing the logo, and I did yarn add react-bootstrap as well as npm i --save react-bootstrap already. I have no idea why it is not working. Any insight can help! Thanks
Without errors for us to look at, there is not much to go off of. I would start with checking where you are importing the LoginNav to. if the <Navbar></Navbar> is a container level element and you are inserting it into a row or col level it may be causing formatting issues.
Update 5-15-2020
You stated the above code is all you have and if so you need to add your Navbar to existing HTML or create a new React App. Either way the info is here https://reactjs.org/.
I was able to run your code just fine and it worked. I changed the bg from dark to light just to see if it changed, and it did.
The commands below will create a React App, and will start the node server environment. Run the commands in console, in a directory you want the app saved. The 'my-app' at the end of the first command is going to be the name of your App. So it can be whatever you want, and 'npx' isn't a typo.
npx create-react-app my-app
cd my-app
npm start
The code below is how I used the Navbar and it displayed just fine. If you already have all this set up, try and put the style sheet import right before the ReactDOM.render() in index.js
Update
Is this how your file set-up looks?
//index.html
< !DOCTYPE html >
<html lang="en">
<head>
// loads of stuff here, taken out for shorthand. Not important for the example
// but important for the overall project to work and is included when you create
// the app. Plus any additional things you add
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
//index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './fileLocation'
//import style sheet here and see if that helps with formatting
ReactDOM.render(<App />, document.getElementById('root'))
//App.js
import React, { Component } from 'react'
import LoginNav from './fileLocation'
class App extends Component {
render(){
return (<LoginNav />);
}
}
export default App