I'm trying to use a React Bootstrap Navbar as one of my components. However anytime I copy the code and try to render it it gives me the following 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.
Check the render method of NewSiteNav.
I've tried all I can to troubleshoot it, I've imported/exported the components different ways, updated react, react-bootstrap and react-dom and no success. However when I comment out the navbar code and replace it with normal JSX, it works fine.
Here is the component:
import React, { Component } from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
import './NewSiteNav.css';
class NewSiteNav extends Component {
render() {
return (
<div>
<Navbar collapseOnSelect>
<Navbar.Collapse>
<Nav defaultActiveKey="">
<Nav.Item>
<Nav.Link href="">Active</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="">Option 2</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="" disabled>
Disabled
</Nav.Link>
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
}
}
export default NewSiteNav;
Please change you imports to
import { Navbar, Nav } from 'react-bootstrap';
NavItem is not exported as it is Nav.Item
Answers involving import are targeted at NodeJS, but this question is not tagged as NodeJS and I'm getting the same in Flask when my script is inlined in index.html.
I found this helpful:
const Tab = ReactBootstrap.Tab;
const Row = ReactBootstrap.Row;
const Col = ReactBootstrap.Col;
const Nav = ReactBootstrap.Nav;
const NavItem = ReactBootstrap.NavItem;
// other code ...
<Nav bsStyle="pills" activeKey={1} onSelect={handleSelect}>
<NavItem eventKey={1} href="/home">
NavItem 1 content
</NavItem>
<NavItem eventKey={2} title="Item">
NavItem 2 content
</NavItem>
<NavItem eventKey={3} disabled>
NavItem 3 content
</NavItem>
</Nav>
I also had some issues because I'm dumb and was following documentation for React-Bootstrap 1.0 beta, which requires Bootstrap 4. I'm actually using 0.32.
Related
I've installed Reactstrap on a project using the NextJS TypeScript install. I've copied the Navbar example from the Reactstrap docs. The navigation shows fine, but on mobile when I click the Navbar toggle, the toggle menu does not open. In fact, no JavaScript components from Reactstrap worked. I've tried modals as well, they don't work either.
Aside from the JavaScript not working when using the Reactstrap components, the Reactstrap CSS styles work completely fine.
Link to live project codesandbox to test.
Code for the Navbar specifically below:
import Link from "next/link";
import {
NavbarBrand,
NavbarToggler,
Collapse,
NavItem,
NavLink,
Nav,
Navbar,
} from "reactstrap";
import styles from "./Navigation.module.scss";
const Navigation = () => {
return (
<div className={styles.nav}>
<Navbar expand="md">
<NavbarBrand href="/">Premium Delivery</NavbarBrand>
<NavbarToggler onClick={function noRefCheck() {}} />
<Collapse navbar>
<Nav className="ms-auto" navbar>
<NavItem>
<NavLink>
<Link href="/">Home</Link>
</NavLink>
</NavItem>
<NavItem>
<NavLink>
<Link href="/services">Services</Link>
</NavLink>
</NavItem>
<NavItem>
<NavLink>
<Link href="/service-fees">Service Fees</Link>
</NavLink>
</NavItem>
<NavItem>
<NavLink>
<Link href="/about">About</Link>
</NavLink>
</NavItem>
<NavItem>
<NavLink>
<Link href="/contact">Contact</Link>
</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
);
};
export default Navigation;
I don't know why, but their documentation on the Storybook puts the function noRefCheck() as a placeholder. You are meant to create your own function to activate the Reactstrap code as described in their Github examples:
https://github.com/reactstrap/reactstrap/blob/master/stories/examples/NavbarToggler.js
First, import useState so we can use the hook.
import { useState } from 'react';
Somewhere before the return, add a hook like
const [isOpen, setIsOpen] = useState(false);
Next, for the NavbarToggle, add the hook to the Event
<NavbarToggler onClick={() => { setIsOpen(!isOpen) }} />
Finally, ensure that the Collapse has the correct state
<Collapse isOpen={isOpen} navbar>
Navbar Contents
</Collapse>
I'm new in reactjs and I would like to link all my pages with the NavBar function I coded.
When i click on the 'Companies' button, the URL changes correctly to 'http://localhost:3000/companies.js' but the page itself doesn't change... Here's the NavBar code:
import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Nav from 'react-bootstrap/Nav';
import NavDropdown from 'react-bootstrap/NavDropdown';
export default function NavBar() {
const handleSelect = (eventKey) => {
let path={eventKey};
window.location=path;
};
return (
<Nav variant="pills" activeKey="/index.js" onSelect={handleSelect}>
<Nav.Item>
<Nav.Link eventKey="/index.js" href="/index.js">
Home
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="/login.js" href="/login.js">
Login
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="/companies.js" href="/companies.js">
Companies
</Nav.Link>
</Nav.Item>
</Nav>
);
}
And here's my Companies.js code as an example:
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import {ImageGrid} from './charts.js';
import NavBar from './navbar.js';
ReactDOM.render(<div>
<NavBar />
<ImageGrid />
</div>, document.getElementById('root'));
You are not binding the component with corresponding links.
The code you have written in companies.js is wrong. This code should be in App.js only.
To navigate from one page to another page, you should have install react-router and then bind each component with the particular link. Then you will be able to access this page.
Please visit the below medium link where you can understand it easily. Hope you got the solution.
https://medium.com/how-to-react/use-react-router-link-with-bootstrap-315a8b88e129
https://faiizii992.medium.com/creating-a-navbar-using-react-router-dom-and-react-bootstrap-react-router-bootstrap-e6b59015a5ec
I am trying to implement the navigation bar component offered by react-bootstrap. But I am getting a weird error. Below is the screenshot of the stacktrace.
This is my code for navigation bar.
import React from "react";
import {Navbar, Nav, NavItem} from "react-bootstrap";
import navigationbarlogo from "../assets/images/navigationbarlogo.png"
import navstyle from "../assets/css/NavigationBar.css"
class NavigationBar extends React.Component{
render() {
return (
<Navbar bsStyle="inverse">
<Navbar.Header>
<Navbar.Brand style={navstyle}>
<img src={navigationbarlogo} alt={'logo for navigation bar'}/>
Tweelyze
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={1} href="#">Analytics</NavItem>
<NavItem eventKey={2} href="#">About Us</NavItem>
</Nav>
</Navbar>
);
}
}
export default NavigationBar;
I am not able to figure out what is wrong here
check your imported component. we use import {component-name} from '' to import named export and import 'any-component-name' from '' to import default import.
I think it's the way your importing your styles, this error usually occurs when the module you imported does is not found. Can I see the directory of your file so that we can check if it loads there correctly?
I currently have an app with a few different pages, the routing works fine if I use the Link to component in the initial page, however from the navbar I get the message:
Cannot GET /page1
And I also noticed that the link on the top of the browser goes to: http://localhost:3000/page1 as opposed to http://localhost:3000/#/cities (like it would if I use Link to).
My current navbar code is this:
export class NavigationBar extends Component {
render(){
return(
<Navbar>
<Navbar.Header>
<Navbar.Brand>
Navbar
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={1} href="/page1">Page1</NavItem>
<NavItem eventKey={2} href="/page2">Page2</NavItem>
</Nav>
</Navbar>);
}
}
If I just wrap the text up with Link to, it just works when we click on the text, which isn't what I want. What can I do so that the NavItem will behave like Link to but still look fine?
Thanks
I completely forgot that I need to wrap up each of my NavItem components with the LinkContainer from react-router-bootstrap.
That took care of everything.
Using the Navbar example in my code, it renders fine but everything apart from the Header component doesn't respond to clicks. The dropdown doesn't dropdown, the links don't take me anywhere. Happens both on mobile and desktop. I'm using react v14.8, does that affect anything? I know the latest version is 15 but I have to keep it at 14 to support another library I'm using...
import * as React from "react";
import * as ReactDOM from "react-dom";
import * as _ from "lodash";
var firebase = require('firebase');
var firebaseui = require('firebaseui');
import {Navbar, Nav, NavItem, NavDropdown, Button, Jumbotron, MenuItem} from 'react-bootstrap';
export class App extends React.Component<any, any> {
constructor() {
super();
}
render() {
return (
<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.3}>Separated link</MenuItem>
</NavDropdown>
</Nav>
</Navbar>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
This is literally everything in my code. My index.html has a div with the id 'app' that it's getting rendered to. Nothing here should not be working, but for some reason, it's broken.
Oh, I should mention; no errors in Chrome Dev Tools console, pausing on exceptions doesn't catch any exceptions when clicking the unresponsive items. Completely silent and utter failure.
edit: here's my package.json for some installing shenanigans: http://pastebin.com/zYZQFRa5