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>
Related
I'm building a navbar for a project and the above message is telling me to check the render method in my header component. I've tried everything I can think of, including looking through answers on here. Specifically, I tried moving the Header component between my App component and the index.js file Not sure if I need a break or something but in any case, here's my header:
import React from "react";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import "bootstrap/dist/css/bootstrap.min.css";
import LinkContainer from "react-router-bootstrap";
const header = () => {
return (
<Navbar collapseOnSelect expand="lg">
<LinkContainer to="/App">
<Navbar.Brand href="/App">
<img
src="/PPLogoEdit.jpg"
width="110"
height="50"
className="d-inline-block align-top"
alt="pikelogo"
/>
</Navbar.Brand>
</LinkContainer>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<LinkContainer to="/App">
<Nav.Link style={{ color: "yellow" }} href="/App">
Home
</Nav.Link>
</LinkContainer>
<LinkContainer to="/About">
<Nav.Link style={{ color: "orange" }} href="/About">
About
</Nav.Link>
</LinkContainer>
<LinkContainer to="/Gallery">
<Nav.Link style={{ color: "green" }} href="/Gallery">
Gallery
</Nav.Link>
</LinkContainer>
<LinkContainer to="/Shop">
<Nav.Link style={{ color: "blue" }} href="/Shop">
Shop
</Nav.Link>
</LinkContainer>
<LinkContainer to="Contact">
<Nav.Link style={{ color: "purple" }} href="/Contact">
Contact
</Nav.Link>
</LinkContainer>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
export default header
and the index.js file:
import React from "react";
import ReactDOM from "react-dom";
import 'bootstrap/dist/css/bootstrap.min.css'
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Header from './components/Header';
import App from "./components/App";
import About from "./components/About";
import Gallery from "./components/Gallery";
import Shop from "./components/Shop";
import Contact from "./components/Contact";
ReactDOM.render(<React.StrictMode>
<Router>
<Switch>
<Route exact path="/" component={App} />
<Route path="/about" component={About} />
<Route path="/gallery" component={Gallery} />
<Route path="/shop" component={Shop} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
</React.StrictMode>, document.getElementById("root"));
Any help is appreciated, thank you!
Look at the error messages:
Warning: React.createElement: 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 your code at Header.jsx:24.
in Header (at src/index.js:15)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:14)
in StrictMode (at src/index.js:13)
Repeats "Check your code at Header.jsx:XX" for all lines where LinkContainer is used.
It's flagging the LinkContainer you try to import from react-router-bootstrap. You default import it but it should be a named import.
import { LinkContainer } from "react-router-bootstrap";
Trying to get webpage to render the Resources.js component. However, the only thing that changes is the url route (<www.examplesite/resources>). The home page component remains on screen, and is never replaced by the resources component. Have tried using a Nav.Item tag instead of Nav.Link tag. Have also tried using Link Container to wrap Nav.Link and Nav.Item, and doesn't work.enter code here
import React from 'react';
import { BrowserRouter, Route, NavLink, Switch, withRouter, Link } from 'react-router-dom';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import { LinkContainer } from 'react-router-bootstrap';
import Home from './components/Home';
import Resources from './components/Resources';
class App extends Component {
render () {
return (
<React.Fragment>
<BrowserRouter>
<Switch>
<Route to='/' exact render={() => (<Home/>)} />
<Route to='/resources' exact render={() => (<Resources/>)} />
</Switch>
<Navbar id='make_gray' bg="light" expand="lg" fixed='top'>
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<NavDropdown title={'Link Dropdown'} id="basic-nav-dropdown">
<Nav.Link as={Link} exact to="/resources">link to resources</Nav.Link>
<NavDropdown.Divider />
<Nav.Link as={Link} exact to="/resources">link to resources</Nav.Link>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
</BrowserRouter>
</React.Fragment>
)
}
}
Had to replace all "to" attributes in my Route Components to "path" attributes.
I am using bootstrap 4 with reactjs. Using react-bootstrap module, trying to render the Navbar , but somehow , it is not rendering properly.
i am using bootstrap 4 syntax in the code but not sure whether any module/lib is using any bootstrap syntax 3
here is the code (App.js) :
import React, { Component } from 'react';
import Header from './Components/HeaderComponents/header';
import Footer from './Components/FooterComponents/footer';
import Homepage from './Components/pages/homePage';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import CustNavbar from './Components/pages/navbar';
import About from './Components/pages/About';
import News from './Components/pages/News';
import ReactBootstrap, { Navbar, Nav, NavItem, Jumbotron, Container, Row, Column, Image, Button } from 'react-bootstrap';
import './Assets/css/default.min.css';
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Navbar />
<Route exact path="/" component={Homepage} />
<Route path="/about" component={About} />
<Route path="/news" component={News} />
</div>
</Router>
);
}
}
export default App;
and the navbar.js :
import React, { Component } from 'react';
import ReactBootstrap, { Navbar, Nav, NavItem } from 'react-bootstrap';
import { Link } from 'react-router-dom';
class CustNavbar extends Component {
render() {
return (
<Navbar default collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
<Link to="/">CodeLife</Link>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1} componentClass={Link} to="/">
Home
</NavItem>
<NavItem eventKey={2} componentClass={Link} to="/about">
About
</NavItem>
<NavItem eventKey={3} componentClass={Link} to="/news">
News
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
}
export default CustNavbar;
what is happening
now the issue, there is no any compilation error , but somehow , Navigation bar is not rendering properly. Not sure whether the issue with version syntax or the implementation itself. please suggest
what is expected
Navigation bar should appear in the homepage before Grid/container
EDIT 1:
I have modified the code as suggested . please below :
App.js
import React, { Fragment, Component } from 'react';
import Header from './Components/HeaderComponents/header';
import Footer from './Components/FooterComponents/footer';
import Homepage from './Components/pages/homePage';
import CorporateTraining from './Components/pages/corporateTraining';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import CustNavbar from './Components/pages/navbar';
import About from './Components/pages/About';
import News from './Components/pages/News';
import ReactBootstrap, { Navbar, Nav, NavItem, Jumbotron, Container, Row, Column, Image, Button } from 'react-bootstrap';
import './Assets/css/default.min.css';
class App extends Component {
render() {
return (
<Fragment>
<Navbar />
<div className="App">
<Router>
<Route exact path="/" component={Homepage} />
<Route path="/about" component={About} />
<Route path="/news" component={News} />
</Router>
</div>
</Fragment>
);
}
}
export default App;
Regards,
I'm not really sure as its too unclear. But try moving your navbar on top of router as i assume that className App have styling in them. Let me know
import React, { Fragment, Component } from 'react';
...
return (
<Fragment>
<Navbar />
<div className="App">
<Router>
<Switch>
<Route exact path="/" component={Homepage} />
<Route path="/about" component={About} />
<Route path="/news" component={News} />
</Switch
</Router>
</div>
</Fragment>
)
Don't forget to add Fragment
I'm fairly new to ReactJS and Bootstrap, so I apologize if this is a dumb question. I downloaded a template online and I have a dropdown in the navbar of my app. For reference, here is what the dropdown looks like:
What I want is for each <MenuItem> (The 'API Service #' buttons) to send me to a different link. I have tried tweaking around a little bit and this is what I got so far:
import React, { Component } from "react";
import { Nav, NavDropdown, MenuItem } from "react-bootstrap";
class AdminNavbarLinks extends Component {
render() {
return (
<div>
<Nav>
<NavDropdown eventKey={2} title="Dropdown" id="basic-nav-dropdown">
<MenuItem eventKey={2.1} href="/serviceone">
API Service 1
</MenuItem>
<MenuItem eventKey={2.2} href="/servicetwo">
API Service 2
</MenuItem>
<MenuItem eventKey={2.3} href="/servicethree">
API Service 3
</MenuItem>
<MenuItem eventKey={2.4} href="/servicefour">
API Service 4
</MenuItem>
<MenuItem eventKey={2.5} href="/servicefive">
API Service 5
</MenuItem>
</NavDropdown>
</Nav>
<Nav pullRight>
//Other NavDropdowns
</Nav>
</div>
);
}
}
export default AdminNavbarLinks;
What this code currently does is sends you to the link that corresponds to each href, but then immediately sends you to the default page of the app, which is /dashboard (An example is if I click on the "API Service 3" button on the dropdown, it sends me to "#/servicethree", but then immediately sends me back to "#/dashboard"). I'm curious as to why it reverts me back to the default page? Any help would be appreciated, since i'm not quite sure how to make these MenuItems have a link. I can provide more code if necessary.
EDIT:
Here is the updated AdminNavbarLinks file:
import React, { Component } from "react";
import { Nav, NavDropdown, MenuItem } from "react-bootstrap";
import { BrowserRouter as Link } from "react-router-dom";
class AdminNavbarLinks extends Component {
render() {
return (
<div>
<Nav>
<NavDropdown eventKey={2} title="Dropdown" id="basic-nav-dropdown">
<Link to="/serviceone">
<MenuItem eventKey={2.1} href="/serviceone">
API Service 1
</MenuItem>
</Link>
<MenuItem eventKey={2.2} href="/servicetwo">
API Service 2
</MenuItem>
<MenuItem eventKey={2.3} href="/servicethree">
API Service 3
</MenuItem>
<MenuItem eventKey={2.4} href="/servicefour">
API Service 4
</MenuItem>
<MenuItem eventKey={2.5} href="/servicefive">
API Service 5
</MenuItem>
</NavDropdown>
</Nav>
<Nav pullRight>
//Other NavDropdowns
</Nav>
</div>
);
}
}
export default AdminNavbarLinks;
And now here is the main file index.js:
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
import Navbar from "components/Navbars/AdminNavbarLinks.jsx";
import Dashboard from "views/Dashboard.jsx";
import ServiceOne from "views/ServiceOne.jsx";
import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/animate.min.css";
import "./assets/sass/light-bootstrap-dashboard-react.scss?v=1.3.0";
import "./assets/css/demo.css";
import "./assets/css/pe-icon-7-stroke.css";
import AdminLayout from "layouts/Admin.jsx";
ReactDOM.render(
<BrowserRouter>
<Navbar />
<Switch>
<Route path="/" component={Dashboard} exact />
<Route path="/serviceone" component={ServiceOne} exact />
</Switch>
<Switch>
<Route path="/admin" render={props => <AdminLayout {...props} />} />
<Redirect from="/" to="/admin/dashboard" />
</Switch>
</BrowserRouter>,
document.getElementById("root")
);
EDIT #2
Solution found. See my answer below.
I finally got this to work. All I did was change some properties of the <Link to tag. Here is how AdminNavbarLinks now looks:
import React, { Component } from "react";
import { Nav, NavDropdown, MenuItem } from "react-bootstrap";
import { NavLink } from "react-router-dom";
class AdminNavbarLinks extends Component {
render() {
return (
<div>
<Nav>
<NavDropdown title="Services" id="basic-nav-dropdown">
<MenuItem>
<NavLink
to="/admin/serviceone"
className="nav-link"
activeClassName="active"
>
API Service 1
</NavLink>
</MenuItem>
<MenuItem>
<NavLink
to="/admin/servicetwo"
className="nav-link"
activeClassName="active"
>
API Service 2
</NavLink>
</MenuItem>
<MenuItem>
<NavLink
to="/admin/servicethree"
className="nav-link"
activeClassName="active"
>
API Service 3
</NavLink>
</MenuItem>
<MenuItem>
<NavLink
to="/admin/servicefour"
className="nav-link"
activeClassName="active"
>
API Service 4
</NavLink>
</MenuItem>
<MenuItem>
<NavLink
to="/admin/servicefive"
className="nav-link"
activeClassName="active"
>
API Service 5
</NavLink>
</MenuItem>
</NavDropdown>
</Nav>
<Nav pullRight>
//Other NavDropdowns
</Nav>
</div>
);
}
}
export default AdminNavbarLinks;
You need to integrate react-router-dom to navigate across components in your React application.
Simply nest the MenuItems in a Link tag. And in each Link tag, you define the to property with the path that you want to navigate to. This will end up displaying a completely different component.
import React, { Component } from "react";
import { Nav, NavDropdown, MenuItem } from "react-bootstrap";
class AdminNavbarLinks extends Component {
render() {
return (
<div>
<Nav>
<NavDropdown eventKey={2} title="Dropdown" id="basic-nav-dropdown">
<Link to="/serviceone">
<MenuItem eventKey={2.1}>
API Service 1
</MenuItem>
</Link>
...repeat for others
</NavDropdown>
</Nav>
<Nav pullRight>
//Other NavDropdowns
</Nav>
</div>
);
}
}
export default AdminNavbarLinks;
You would also have to define your Routes in your main application, to complete the configuration.
Something like this would suffice:
App.js
import React from "react"
import { BrowserRouter, Route, Switch } from "react-dom
import Navbar from "whatever path this"
import Home from "./whatever path this"
import ServiceOne from "./whatever path this"
const App = () => {
return(
<BrowserRouter>
<Navbar/>
<Switch>
<Route path="/" component={Home} exact/>
<Route path="/serviceone" component={ServiceOne} exact/>
</Switch>
</BrowserRouter>
)
}
In the above we've defined some very basic routing for your App. I'm assuming your Navbar actually has the AdminNavbarLinks component inside it. From there you just click a Link with a matching url path to the Routes you defined.
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