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
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>
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 learning reactjs and I'm trying to appear a search bar in Home section and to disappear it in the Shop section (or other sections).
To better understand, I leave you a reference image: The final result must be like this
This is the code of my component:
import React, {Component} from 'react';
import {Nav, Button, Navbar, Form, FormControl} from 'react-bootstrap';
import {NavLink} from 'react-router-dom';
import {AuthButton} from '../App';
import logo from '../img/logo.png'
class Header extends Component{
render(){
return(
<>
<Navbar>
<div>
<img src={logo} className='main-logo'/>
</div>
<Form className='form'>
<Button className='btn-search'/>
<FormControl type="text" placeholder="Search..." className='barra'/>
</Form>
<Nav className="ml-auto">
<NavLink className= 'nav-link' to='/'>Home</NavLink>
<hr className='hr-header'/>
<Nav.Link className= 'nav-link'>About</Nav.Link>
<hr className='hr-header'/>
<NavLink className= 'nav-link' to='/Shop'>Shop</NavLink>
<hr className='hr-header'/>
<Nav.Link className= 'nav-link'>Help</Nav.Link>
</Nav>
<NavLink to='/Shopping'>
<Button className='btn-cart' variant="secondary">
Your Cart
</Button>
</NavLink>
<AuthButton/>
</Navbar>
</>
)
}
}
export default Header;
And this is how I've imported my component into the Router
import React from 'react';
import './styles/App.css';
import Shop from './container/shop';
import Shopping from './container/shopping';
import Shipping from './container/shipping';
import Payment from './container/payment';
import home from './container/home';
import Product from './container/Product';
import iPhone from './container/iPhone';
import iPad from './container/iPad';
import SignInForm from './components/SignInForm';
import {BrowserRouter as Router, Route, withRouter, Redirect, Switch} from 'react-router-dom';
import {Button, ButtonToolbar, OverlayTrigger, Popover} from 'react-bootstrap';
function App(){
return (
<Router>
<Route>
<Switch>
<Route exact path='/' component={home}/>
<Route path='/Shop' component={Shop}/>
<Route path='/Product' component={Product}/>
<Route path='/iPhone' component={iPhone}/>
<Route path='/iPad' component={iPad}/>
<PrivateRoute path='/Shopping' component={Shopping}/>
<Route path='/Shipping' component={Shipping}/>
<Route path='/Payment' component={Payment}/>
<Route path='/SignInForm' component={SignInForm}/>
<Route path='*' component={() => <div
style = {{
textAlign: 'center',
paddingTop: 250,
fontSize: 30
}}>
<strong>404 NOT FOUND</strong>
</div>}/>
</Switch>
</Route>
</Router>
);
}
export default App;
I've also other files .js for the continers of my sections
Thank you all!
If you create separate components for Nav and Search, life becomes much easier. Place your Search component inside your Nav component, then render Search only at certain addresses (i.e. anything other than /Shop).
import React from "react";
import { withRouter } from "react-router-dom";
import Nav from "/.Nav";
function SearchComponent() {
return <div>My search bar</div>;
}
function MyComponent(props) {
const path = props.location.pathname;
return (
<div>
<Nav>{path !== "/Shop" && <SearchComponent />}</Nav>
</div>
);
}
export default withRouter(MyComponent);
This technique exposes location through withRouter to get the current path (/pageName). Then, it uses conditional rendering to hide the Search if the location is "/Shop."
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.