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?
Related
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 new to React and I am trying to create a sidebar having links to different pages or modules. I have everything modularized meaning, the sidebar Navigation is a separate module where I import all the linked classes and then use react-router-dom to redirect the paths. But somehow when redirecting, The response page is blank.
Navigation Module:
import React, { Component } from "react";
import { Route, Switch, Link } from "react-router-dom";
import Colors from "../../pages/Colors";
import Typography from "../../pages/Typography";
import Spaces from "../../pages/Spaces";
import Buttons from "../../pages/Buttons";
import Inputs from "../../pages/Inputs";
import Grid from "../../pages/Grid";
import "./style.css";
class Nav extends Component {
render() {
return (
<div className="nav">
<ul>
<li>
<Link to="/colors">Colors</Link>
</li>
<li>
<Link to="/typography">Typography</Link>
</li>
<li>
<Link to="/spaces">Spaces</Link>
</li>
<li>
<Link to="/buttons">Buttons</Link>
</li>
<li>
<Link to="/inputs">Inputs</Link>
</li>
<li>
<Link to="/grid">Grid</Link>
</li>
</ul>
<Switch>
<Route path="/colors" component={Colors} exact />
<Route path="/typography" component={Typography} exact />
<Route path="/spaces" component={Spaces} exact />
<Route path="/buttons" component={Buttons} exact />
<Route path="/inputs" component={Inputs} exact />
<Route path="/grid" component={Grid} exact />
</Switch>
</div>
);
}
}
export default Nav;
Now the link classes that I import here have just simple content right now like the following.
pages/Colors/index.js:
import React, { Component } from "react";
class Colors extends Component {
render() {
return (
<div>
<h1>Colors</h1>
</div>
);
}
}
export default Colors;
The main BrowserRouter is located in the App.js component from where the Sidebar component is called having Navigation component.
Now the thing is if I remove the BrowserRouter from App.js and put it in the Navigation module the routing works.
How come so?
Which pattern is the correct one?
When you work with React-router and React-router-dom, make sure the Router component is the top most parent.
You can try again by:
Move all Router, Switch into App.js.
Inside Sidebar component, just render links, neither Switch nor Route component.
It will work.
Similar to the answer from Shina, who covers it pretty well, just a few more comments. Keeping your React-Router and switch in your App.jsx file is relatively standard. Since App is the parent component, the Router and Switch will only be rendered once, while keeping the router in Nav.jsx would force the Switch re-rendered with each route. But keeping the Switch wrapped in the Router component should solve your issues here.
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.
Component from globalstyle
Global styles are visible only in this component, col-lg-2,col-md-4 -> globalstyle
import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import { BrowserRouter } from 'react-router-dom'
import App from './containers/App'
import './basestyle/flexboxgrid.min.css' //Global style
ReactDOM.render(
<AppContainer>
<BrowserRouter>
<App/>
</BrowserRouter>
</AppContainer>,
document.getElementById('root')
);
Component that should get styles
import React from 'react'
import { Link } from 'react-router-dom'
import styles from './Header.css'
import icon from './icon.png'
const Header = () => (
<div className="row">
<div className={`col-lg-2 col-md-4 ${styles.test}`} > //Here is not available
<Link to="/категории">
<div className={styles.logoBox}>
<img src={icon} alt="logo"/>
<h1>Белый кот</h1>
</div>
</Link>
</div>
</div>
);
export default Header;
Webpack.config https://github.com/minaev-git/TestQuestion
Try adding global to your class name.
Eg
:global(.yourClass) {
//your css
}
Those styles will only be loaded if <Header /> appears somewhere in <App />. I'm assuming that's the case, but otherwise make sure that the header component shows up in <App />. If that's not working, try looking around your Network tab of the web inspector and reload the page -- see if your CSS is even being loaded.
EDIT: Just seeing where in the code your class isn't working. If .test is a class in your global styles file, it wouldn't show up in the Header.css file. Try removing "styles" and just give it a class of test if test is a class in flexboxgrid.min.css.
Import for CSS is
import './Header.css'
Reference the css classes in your component then with:
<div className="col-lg-2 col-md-4 test" >
You would need to import bootstrap to your index.jsx, currently you are only importing this, require('./basestyle/flexboxgrid.min.css') that is not enough, how will your system know that there is boostrap if its not imported
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