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
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 getting odd behavior using #reach/router. My aim is to have a page with tabs. When I click on a tab the url changes and the page changes (though it doesn't reload the whole page). I've been using chakra ui since it makes the theme making easier for me.
The behavior I get is odd. Sometimes the URL changes as I switch between tabs. It works great. Then sometimes the URL doesn't change, even though I've switched tabs.
My project is located here
import React from "react";
import { Router, Link } from "#reach/router";
import {
Tab,
Tabs,
TabList,
TabPanel,
TabPanels,
useColorModeValue
} from "#chakra-ui/react";
import Somatic from "../pages/somatic";
import Ef from "../pages/executive_functions_coaching";
import Intro from "../pages/home";
function ConceptTabs(props) {
const [tabIndex, setTabIndex] = React.useState(0);
return (
<>
<Tabs
size="lg"
isFitted
variant="soft-rounded"
colorScheme="yellow"
onChange={(index) => {
setTabIndex(index);
}}
>
<TabList>
<Tab>
<Link to="/">
Tab1
</Link>
</Tab>
<Tab>
<Link to="/executive_functions_coaching/">
Tab2
</Link>
</Tab>
<Tab>
<Link to="/somatics/">
Tab3
</Link>
</Tab>
</TabList>
<TabPanels p="2rem">
<TabPanel>
<Router>
<Intro path='/' />
</Router>
</TabPanel>
<TabPanel>
<Router>
<Ef path='/executive_functions_coaching/' />
</Router>
</TabPanel>
<TabPanel>
<Router>
<Somatic path='/somatics/' />
</ Router>
</TabPanel>
</TabPanels>
</Tabs>
</>
);
}
export default ConceptTabs;
I've tried to use <NavLink> but had similar issues.
I'm quite new to routing, but I've gotten this to work without the tabs. I'm wondering if there's a way to get the router to work with tabs?
It seems odd that you are mixing reach-router and react-router-dom, it's successor, but the root of your issue with the tabs is because each Tab component is rendering a Link but the entire tab isn't responsible for navigation.
Only the text part in the middle of each tab/button is the actual link, so the navigation only works if you precisely click on the text part of each tab that is the link.
To resolve you can render each Tab component as a Link component.
The as prop and custom component
<TabList>
<Tab as={Link} to="/">
tab1
</Tab>
<Tab as={Link} to="/executive_functions_coaching/">
tab
</Tab>
<Tab as={Link} to="/somatics/">
tab3
</Tab>
</TabList>
See as following 2 screenshots.
As you can see, 'a' tag is in a 'button' tag.
Real size of "a" is very small.
If you might click tab1, it is occured by button.
So, Please, Drew Reese's answer is fit you.
Thanks.
What you could do is to add onClick={()=>history.push('/route')} on your tabs.
Here is how to initialize history:
improt { useHistory } from 'react-router-dom';
// inside your component:
history = useHistory();
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'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.
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?