We Keep Coding

When I click a link in the react webpage, all components are reloading. Why is that?

I am creating a simple react project. I created an addStudent page. When I go through the link (../add), All components reload including Navbar. I want to reload only addStudent page without reloading Navbar. Can anyone help me?.
App.js
import React from "react";
import Header from "./components/header";
import AddStudent from "./components/addStudent";
import { BrowserRouter as Router, Route } from 'react-router-dom';
function App() {
return (
<Router>
<div>
<Header />
<Route path="/add" component={AddStudent} />
</div>
</Router>
);
}
export default App;

React router renders blank page after import

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.

React Bootstrap: Element type is invalid

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.

React Bootstrap Element type is invalid

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?

React-bootstrap Navbar example doesn't register clicks

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