I have been trying to put a Navbar into a React Project using reactstrap. But the Navbar is not showing just the h1 in the NavbarBrand is rendered for some reasons. I tried to change the css styling, copy and pasted other example Navbars from different websites and tried other kinda similar solutions from here but nothing worked. I am using React version 17.0.2 and reactstrap version 8.9.0.
This is my Navbar Component:
import React, { Component } from 'react';
import { Navbar, NavbarBrand, Nav, NavbarToggler, Collapse, NavItem } from 'reactstrap';
//import { NavLink } from 'react-router-dom';
class Header extends Component {
constructor(props) {
super(props);
this.state = {
isNavOpen: false
};
this.toggleNav = this.toggleNav.bind(this);
}
toggleNav() {
this.setState({
isNavOpen: !this.state.isNavOpen
});
}
render() {
return(
<Navbar bg="dark" variant="dark">
<div className="container">
<NavbarToggler onClick={this.toggleNav} />
<NavbarBrand href="/">
<h1>Navbar</h1>
</NavbarBrand>
<Collapse isOpen={this.state.isNavOpen} navbar>
<Nav navbar>
<NavItem>
<p>Test</p>
</NavItem>
</Nav>
</Collapse>
</div>
</Navbar>
);
}
}
export default Header;
How the navbar looks
I am rather new to React and Javascript overall i hope someone can help me.
You have the isNavOpen in state set to false and your
<Collapse isOpen={this.state.isNavOpen} navbar>
<Nav navbar>
<NavItem>
<p>Test</p>
</NavItem>
</Nav>
</Collapse>
depends upon isNavOpen state which expects to be true to be shown on the screen.
Try setting isNavOpen to true in the state.
Related
I know this question has been asked tons of times but I can't seem to find a working solution for a very simple problem.
I am setting up a simple Navigation Bar using React Bootstrap and React Router
The page loads on the Home page but when a link is clicked the URL changes but the component does not render. When I inspect using google Chrome, the heading is unchanged.
Any help would be greatly appreciated. I've tried almost everything I found here, used withRouter, used regular and elements instead of the ones from React Bootstrap.
Here is the code, index.js is the regular create-react-app set up
App.js
import React from 'react';
import { Home } from './components/pages/Home';
import Navibar from './components/Navibar';
import { LostPets } from './components/pages/LostPets';
import { AdoptPets } from './components/pages/AdoptPets';
import { ContactUs } from './components/pages/ContactUs';
import './App.css';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
function App() {
return (
<div className="App">
{/* Navigation Bar */}
<Router>
<Navibar />
{/* Routes for Pages */}
<Switch>
<Route exact path='/LostPets' component={LostPets}/>
<Route exact path='/AdoptPets' component={AdoptPets}/>
<Route exact path='/ContactUs' component={ContactUs}/>
<Route exact path='/' component={Home}/>
</Switch>
</Router>
</div>
);
}
export default App;
Navbar.js
import React from 'react';
import { Navbar, Nav, Container } from 'react-bootstrap';
function Navibar () {
return(
<Container>
<Navbar bg="primary" variant="dark" sticky="top">
<Navbar.Brand href="#home">PETSTT </Navbar.Brand>
{/* Navigation Bar items */}
<Nav className="mr-auto">
<Nav.Link href="#home">Home </Nav.Link>
<Nav.Link href="#lostpets">Lost Pets </Nav.Link>
<Nav.Link href="#adoptpets">Adopt Me </Nav.Link>
<Nav.Link href="#contactus">Contact Us </Nav.Link>
</Nav>
</Navbar>
</Container>
);
}
All pages are just header text like this.
import React from 'react';
export const Home = () => {
return (
<div>
<h1> Home </h1>
</div>
);
}
You Link is going to the wrong url. You are going to a hash url which would suggest a different section on the same page with that ID.
<Nav.Link href="#lostpets">Lost Pets </Nav.Link>
This doesn't match the routes that you are trying to render. The routes are done correctly.
<Route exact path='/LostPets' component={LostPets}/>
You should change the Link to this:
<Nav.Link href="/LostPets">Lost Pets </Nav.Link>
I have 4 files: App.js, navbar.js, signIn.js, signUp.js. I expect the navbar to be displayed at the top of each page that the user navigates. The links in the navbar work on the homepage but the links are disabled on any other page.
I've tried installing react-bootstrap through npm instead of using the cdn but that did not change the issue. I tried creating another group of components called "NavigationLinks.js" but that didn't work either. I'm at a loss as to what else I could do.
Here are the relevant files:
App.js
import logo from './logo.svg';
import './App.css';
import Navbar from './components/layout/navbar'
import Dashboard from './components/feed/dashboard'
import SignIn from './components/auth/signIn'
import SignUp from './components/auth/signUp'
import { BrowserRouter, Switch, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div className="App">
<Navbar/>
<Switch>
<Route exact path="/" component={Dashboard}/>
<Route path="/signin" component={SignIn}/>
<Route path="/signup" component={SignUp}/>
</Switch>
</div>
</BrowserRouter>
);
}
export default App;
Navbar.js
import { Switch, Route, Link} from 'react-router-dom';
import { Navbar, Nav, Form, FormControl, Button, NavItem } from 'react-bootstrap';
//import './navbar.css';
class navbar extends Component {
render() {
return (
<div>
<div>
<Navbar>
<Navbar.Brand as={Link} to='/'>Rekindle</Navbar.Brand>
<Navbar.Collapse>
<Nav className="mr-auto">
<NavItem eventkey={1} href="/">
<Nav.Link as={Link} to="/" >Home</Nav.Link>
</NavItem>
<NavItem eventkey={1} href="/signup">
<Nav.Link as={Link} to="/signup" >Sign Up</Nav.Link>
</NavItem>
<NavItem eventkey={1} href="/signin">
<Nav.Link as={Link} to="/signin" >Login</Nav.Link>
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
{/*this div works for the routing */}
<div>
</div>
</div>
);
}
}
export default navbar;
The code compiles without errors, but I want to be able to navigate back to the homepage from the signIn and signUp routes.
In your code snippet I found some issue, like you missed to import react only.
Any file you create, you need to import react like,
import React from 'react'; //default
Also you are extending Component in your navbar component which is also need to import from react package.
2 ways to extend Component.
Way 1,
import React from 'react';
class navbar extends React.Component{
render(){
return(
<div>...</div>
)
}
}
export default navbar;
Way 2,
import React,{Component} from 'react';
class navbar extends Component{
render(){
return(
<div>...</div>
)
}
}
export default navbar;
You missed this in you navbar component.
Here is the working code snippet for you.
It looks like these integration errors are common and you are suppose to use: https://github.com/react-bootstrap/react-router-bootstrap
It works when I give the part inside app.js but it shows blank screen when it is put in another file navbar.js and imported. If the code in navbar.js is directly added in app.js instead of importing, it works fine and navbar appears. Otherwise blank screen appears.
index.js is shown below:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
app.js file
import React, { Component } from 'react';
import navbar from './navbar.js';
class home extends Component {
render() {
return (
<div>
<navbar />
</div>
);
}
}
export default home;
navbar.js file:
import React, { Component } from 'react';
import {Navbar} from 'react-bootstrap';
import {NavItem} from 'react-bootstrap';
import {Nav} from 'react-bootstrap';
class navbar extends Component{
render() {
return (
<Navbar collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
React-Bootstrap
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">Link</NavItem>
<NavItem eventKey={2} href="#">Link</NavItem>
</Nav>
<Nav pullRight>
<NavItem eventKey={1} href="#">Link Right</NavItem>
<NavItem eventKey={2} href="#">Link Right</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
export default navbar;
Please help, thanks in advance.
You should always start the name of your custom React components with
a uppercase letter.
import React, { Component } from 'react';
import Navbar from './Navbar.js';
class Home extends Component {
render() {
return (
<div>
<Navbar />
</div>
);
}
}
export default Home;
and it's recommended to use the same name for the file name as well. So it should be ./Navbar.js instead of ./navbar.js
Read this page from the official documentation for more information.
Always start component names with a capital letter. For example, <div/> represents a DOM tag, but <Welcome /> represents a component and
requires Welcome to be in scope.
I am learning react. I am trying to create a navbar and have my tabs open components as new pages using browser router. (When I click the navitems nothing is happening) I have website_header.js as:
import React, { Component } from 'react';
import {Navbar, Nav, NavItem } from 'react-bootstrap';
class Header extends Component {
render() {
return (
<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
Logo
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href='/'>Home</NavItem>
<NavItem eventKey={2} href='/Band'>Band</NavItem>
<NavItem eventKey={3} href='/Discography'>Discography</NavItem>
<NavItem eventKey={4} href='/Media'>Media</NavItem>
<NavItem eventKey={5} href='/Contact'>Contact</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
export default Header;
Then App.js as:
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Header from './components/website_header';
import Home from './components/website_index';
import Band from './components/website_band';
import Discography from './components/website_discography';
import Media from './components/website_media';
import Contact from './components/website_contact';
import './App.css';
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/Band' component={Band}/>
<Route path='/Discography' component={Discography}/>
<Route path='/Media' component={Media}/>
<Route path='/Contact' component={Contact}/>
</Switch>
</div>
</BrowserRouter>
);
}
}
export default App;
If I put just this it works:
import React, { Component } from 'react';
import {Navbar, Nav, NavItem } from 'react-bootstrap';
class Header extends Component {
render() {
return (
<Navbar brand='React-Bootstrap'>
<Nav>
<NavItem eventKey={1} href='/'>Home</NavItem>
<NavItem eventKey={2} href='/Band'>Band</NavItem>
<NavItem eventKey={3} href='/Discography'>Discography</NavItem>
<NavItem eventKey={4} href='/Media'>Media</NavItem>
<NavItem eventKey={5} href='/Contact'>Contact</NavItem>
</Nav>
</Navbar>
);
}
}
export default Header;
Any help would be greatly appreciated I am very new to this.
You could do as oklas suggested, or replace <NavItem> with <li> and <Link>:
For react-router v4:
render() {
return (
<Navbar brand='React-Bootstrap'>
<Nav>
<NavLink to='/'>Home</NavLink>
<NavLink to='/Band'>Band</NavLink>
<NavLink to='/Discography'>Discography</NavLink>
<NavLink to='/Media'>Media</NavLink>
<NavLink to='/Contact'>Contact</NavLink>
</Nav>
</Navbar>
);
}
and for v3 and below (you may add activeClassName prop for styling on the active route link):
render() {
return (
<Navbar brand='React-Bootstrap'>
<Nav>
<li><Link to='/'>Home</Link></li>
<li><Link to='/Band'>Band</Link></li>
<li><Link to='/Discography'>Discography</Link></li>
<li><Link to='/Media'>Media</Link></li>
<li><Link to='/Contact'>Contact</Link></li>
</Nav>
</Navbar>
);
}
Just make sure to import NavLink or Link respectively from react-router.
The react-bootstrap has no integration with react-router. Use react-router-bootstrap for that:
import {LinkContainer} from 'react-router-bootstrap'
<LinkContainer to="/home">
<NavItem eventKey={1}>Home</NavItem>
</LinkContainer>
I have recently migrated from using twitter-bootstrap in react classes to using react-bootstrap. I wanted to test out react-bootstrap Navbar. My code is as:
import React from 'react';
import { Link } from 'react-router';
import Radium from 'radium';
import Grid from 'bootstrap-grid-react';
import * as bootstrap from "react-bootstrap";
export default class Layout extends React.Component {
constructor() {
super();
this.state = {};
}
render() {
let {Nav, Navbar, NavItem, NavDropdown, MenuItem} = bootstrap;
return (
<div>
<Navbar>
<Navbar.Header>
<Navbar.Brand>
APITest
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={1} href="#">New user
</NavItem>
<NavItem eventKey={2} href="#">Create New User</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.3}>Separated link</MenuItem>
</NavDropdown>
</Nav>
</Navbar>
</div>
)
}
}
However this gives me an error
Uncaught Error: Invariant Violation: Element type is invalid:
expected a string (for built-in components) or a class/function (for
composite components) but got: undefined. Check the render method of
Layout.
and a warning:
Warning: React.createElement: type should not be null, undefined,
boolean, or number. It should be a string (for DOM elements) or a
ReactClass (for composite components). Check the render method of
Layout.
I also tried using
import {Nav, Navbar, NavItem, NavDropdown, MenuItem} from 'react-bootstrap' but it also won't work. There is definitely a problem in how I am using Navbar because a normal div is rendering just fine.
Any help is really appreciated.
After a long time struggling with it, I finally got it to work the problem being the extra div above the Navbar.
This is my Final working code:
import React from 'react';
import { Link } from 'react-router';
import Radium from 'radium';
import Grid from 'bootstrap-grid-react';
import {Nav, Navbar, NavItem, NavDropdown, MenuItem} from "react-bootstrap";
export default class Layout extends React.Component {
constructor() {
super();
this.state = {};
}
render() {
return (
<Navbar>
<Navbar.Header>
<Navbar.Brand>
APITest
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={1} href="#">New user
</NavItem>
<NavItem eventKey={2} href="#">Create New User</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.3}>Separated link</MenuItem>
</NavDropdown>
</Nav>
</Navbar>
)
}
}
I still don't know the reason for an error when wrapping the Navbar in a div. Feel free to comment for any explanation.
After dealing with this for way too long, I've found that the problem is the Link component you're using from react-router. I'm not exactly sure on the specifics of the error, but there is a solution. Instead of using Link use the LinkContainer component provided by react-bootstrap-router https://github.com/react-bootstrap/react-router-bootstrap.
From the react-router-bootstrap docs:
npm i -S react-router-bootstrap
In your code use:
<LinkContainer to={{ pathname: '/foo', query: { bar: 'baz' } }}>
<Button>Foo</Button>
</LinkContainer>