Develop Reference

React Router Components not being rendered

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>

Component Not Rendering with React Router and React 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.

How to Put Spacing when SideBar collapse and uncollapse on React

Im trying to achieve when a sidebar collapse the body will make space for the sidebar and when it uncollapse
This is what it looks like when the sidebar uncollapse
enter image description here
and this is what it looks like when the sidebar collapse
enter image description here
import React from 'react';
import SideNav, {
Toggle,
Nav,
NavItem,
NavIcon,
NavText,
} from '#trendmicro/react-sidenav';
import '#trendmicro/react-sidenav/dist/react-sidenav.css';
export const SideBar = () => {
return (
<>
<SideNav
onSelect={(selected) => {
// Add your code here
}}
>
<SideNav.Toggle />
<SideNav.Nav defaultSelected='home'>
<NavItem eventKey='home'>
<NavIcon>
<i className='fa fa-fw fa-home' style={{ fontSize: '1.75em' }} />
</NavIcon>
<NavText>Home</NavText>
</NavItem>
<NavItem eventKey='charts'>
<NavIcon>
<i
className='fa fa-fw fa-line-chart'
style={{ fontSize: '1.75em' }}
/>
</NavIcon>
<NavText>Charts</NavText>
<NavItem eventKey='charts/linechart'>
<NavText>Line Chart</NavText>
</NavItem>
<NavItem eventKey='charts/barchart'>
<NavText>Bar Chart</NavText>
</NavItem>
</NavItem>
</SideNav.Nav>
</SideNav>
</>
);
};
export default SideBar;
and this on App.js
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Nav from './components/NavBar';
import Home from './screens/Home';
import Login from './screens/Login';
import Register from './screens/Register';
import SideBar from './components/SideBar';
import { GlobalProvider } from './context/GlobalState';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
function App() {
return (
<GlobalProvider>
<Router>
<Nav />
<SideBar />
<Switch>
<Route path='/' component={Home} exact />
{/* <Route path='/login' component={Login} exact /> */}
<Route path='/login' component={Login} exact />
<Route path='/register' component={Register} exact />
</Switch>
</Router>
</GlobalProvider>
);
}
export default App;
I tried adding margin in the body but it dosent look nice when you uncollapse because theres still more space. Sorry if this is not right
I want something like this
enter image description here
I'm kinda new and would really appreciate if you could help me
Thanks in advance !!!

If you look at the Trend Micro demo page they do add margins on the content. That is one approach that is already recommended by the module. You can add some CSS transition property so that it is as smooth as the expanding/collapsing of the sidebar. Just add more margin if the sidebar is expanded. Utilize the onToggle event of the sidebar to set the state as needed.
App.js
const [sideNavExpanded, setSideNavExpanded] = React.useState(false);
const contentStyle = {
marginLeft: sideNavExpanded ? "250px" : "70px", // arbitrary values
transition: "margin 0.2s ease"
};
return (
<div>
<SideBar
setSideNavExpanded={setSideNavExpanded}
sideNavExpanded={sideNavExpanded}
/>
<div style={contentStyle}>Some Content</div>
</div>
)
Sidebar.js
export const SideBar = ({ sideNavExpanded, setSideNavExpanded }) => {
return (
<>
<SideNav
onToggle={() => {
setSideNavExpanded(!sideNavExpanded);
}}
>
...
CodeSandBox: https://codesandbox.io/s/so-trend-micro-sidebar-fjo9r?file=/src/App.js

Navigation Links do not work outside of the App Component

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

Navbar for React Website

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>