i have a question about how keep navbar and footer components stable on route change, now when i change route, so when i click some page from navbar all page refreshing with navbar and footer.
i think somewhere i make a mistake.
here is my app component:
class App extends Component {
render() {
return (
<Router>
<div>
<Navbar/>
<main>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/Whoweare' component={Whoweare}/>
<Route path='/Solution' component={Solution}/>
<Route path='/ContactUs' component={ContactUs}/>
</Switch>
</main>
<Footer/>
</div>
</Router>
);
}
}
export default App;
i place here navbar and footer outside of router Switch tag it's right, not?
It's navbar component:
import React from 'react';
import {Navbar, Nav, Button, Container, NavItem} from 'react-bootstrap';
const NavbarComp = () =>
<Navbar>
<Container>
<Navbar.Brand href="/">Logo</Navbar.Brand>
<Navbar.Toggle />
<Navbar.Collapse className="justify-content-end">
<Nav>
<NavItem>
<Nav.Link href='/Whoweare'>Who we are</Nav.Link>
</NavItem>
<NavItem>
<Nav.Link href='/Solution'>Solution</Nav.Link>
</NavItem>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
export default NavbarComp;
I'm not sure about the react bootstrap integration with react router dom.
Ideally you should be using Link from react-router-dom
so in your navbar import { Link } from 'react-router-dom'
and in change your NavItemto
<NavItem>
<Link to='/Solution'>Solution</Link>
</NavItem>
This will not refresh the page but instead update the component (view)
Hope this is helps you. :)
I think you should place the navbar and the footer outside of the router, that way those will always be there even when you change routes. I think this is what you are looking for?
Related
I'm a beginner front-end dev and I try to make an imaginary website. I'm learning to react router now. So when I try to click on the home/about or contact button, It doesn't open it. What am I doing wrong?
here's my code below :
my App code :
import React from 'react';
import './App.css';
import Navibar from './Components/Navibar';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Home from './Components/Home';
import About from './Components/About';
import Contact from './Components/Contact';
let App = () => {
return (
<Router>
<div className="App">
<Navibar/>
<div className="content">
<Switch>
<Route exact path="/">
<Home/>
</Route>
<Route exact path="/About">
<About/>
</Route>
<Route exact path="Contact">
<Contact/>
</Route>
</Switch>
</div>
</div>
</Router>
);
}
export default App;
and here's my navbar code :
import React from 'react';
import {Nav, Navbar, Container} from 'react-bootstrap';
import {Link} from 'react-router-dom';
let Navibar = () => {
return (
<>
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand href="#home">My Portfolio</Navbar.Brand>
<Nav className="me-auto">
<Link to="/">Home</Link>
<Link to="#about">About me</Link>
<Link to="#contact">Contact</Link>
</Nav>
</Container>
</Navbar>
</>
);
}
export default Navibar;
and here's my Home (the home/about and contact codes are the same) code :
import React from 'react';
let Home = () => {
return (
<>
<h2>Home</h2>
</>
);
}
export default Home;
I need help from a professional, because I'm getting stuck in this :)
The Navibar should link to the route paths you are rendering, not anchor tags (hashes) on the current page. The bootstrap Navbar.Brand component should also render a RRD Link component instead of a plain anchor tag with href attribute.
import React from 'react';
import { Nav, Navbar, Container} from 'react-bootstrap';
import { Link } from 'react-router-dom';
const Navibar = () => {
return (
<>
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand
as={Link} // <-- as a RRD Link component
to="/" // <-- to prop for Link component
>
My Portfolio
</Navbar.Brand>
<Nav className="me-auto">
<Link to="/">Home</Link> // <-- "/"
<Link to="/about">About me</Link> // <-- "/about"
<Link to="/contact">Contact</Link> // <-- "/contact"
</Nav>
</Container>
</Navbar>
</>
);
}
export default Navibar;
The App component should specify route paths that match what the navbar is linking to.
Also the routes App is rendering within the Switch component should be rendered in inverse order of route path specificity. In other words, render the more specific paths prior to the less specific paths. This is to attempt to match and render more specific paths and falling back to less specific paths. This also effectively eliminates the need to use the exact prop.
const App = () => {
return (
<Router>
<div className="App">
<Navibar />
<div className="content">
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/contact">
<Contact />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</div>
</Router>
);
}
Hope you are doing good. I have one question regarding react routing. I have 5 components defined in app.js file after one by one and created route for that as shown in app.js file and created header for that as well as shown in header.js file. But the problem is this when I should click on the 4th component defined in header then focus should come near to 4th component, instead of displaying 4th component below 5th component. for reference I'm giving one website link I want to make routing like this website, if you didn't understand my question.
Refernce Website link
https://www.styleshout.com/templates/preview/Ceevee_2_0_0/
Note: I have completed this issue, for solution please check this link
https://github.com/pajjwal1/Resume
***App.jS***
import './App.css';
import { Route, Switch} from 'react-router-dom'
import Header from './Components/Header/header';
import Home from './Components/Home/home'
import Bg from './Asset/header-bg.jpg'
import About from './Components/About/about'
import Technical from './Components/Technical/technical'
import Project from './Components/Project/project'
import Education from './Components/Education/education'
import Personal from './Components/Personal/personal'
function App() {
return (
<div className="App">
<Header />
<Home background = {Bg}/>
<About />
<Technical />
<Project />
<Education />
<Personal />
<Switch>
<Route path='/home' exact component={Home}></Route>
<Route path='/about' component={About}></Route>
<Route path='/technical' component={Technical}></Route>
<Route path='/project' component={Project}></Route>
<Route path='/education' component={Education}></Route>
<Route path='/personal' component={Personal}></Route>
</Switch>
</div>
);
}
export default App;
***header.js***
import React from 'react';
import '../Header/header.css'
import {NavLink} from 'react-router-dom'
function header(){
return (
<div className="header">
<div className="header_center">
{/* <p>Home</p>
<p>About</p>
<p>Technical Expertiese</p>
<p>Projects</p>
<p>Qualification</p>
<p>Personal Details</p> */}
<NavLink className='nav-item' to='/home'>Home</NavLink>
<NavLink className='nav-item' to='/about'>About</NavLink>
<NavLink className='nav-item' to='/technical'>Technical Expertiese</NavLink>
<NavLink className='nav-item' to='/project'>Projects</NavLink>
<NavLink className='nav-item' to='/education'>Qualification</NavLink>
<NavLink className='nav-item' to='/personal'>Personal Details</NavLink>
</div>
</div>
);
}
export default header;
I see what you want. Do you want to scroll to the component when you click on the nav item of the header?
In this case, you should use a hash router.
Please put id to each component that you want to navigate on the page.
And use # for hash navigate.
For example, if you want to navigate to projects component, use like this.
<Link to="/#projects"> Projects </Link>
And have you wrapped your app component with Router?
import { createBrowserHistory as history } from 'history'
...
<Router history={history()}>
...
<App />
...
</Router>
I hope this helps you to solve your problem.
If it doesn't work for you, please contact me.
I'm sure I can solve this kind of problem.
I will list the things that I updated on your project.
#app.js
Remove Switch wrapper with children
...
{/* <Switch>
<Route path='/home' exact component={Home}></Route>
<Route path='/about' component={About}></Route>
<Route path='/technical' component={Technical}></Route>
<Route path='/#project' component={Project}></Route>
<Route path='/#education' component={Education}></Route>
<Route path='/personal' component={Personal}></Route>
</Switch> */}
...
#header.js
Please use a tag instead of Navlink
<a className='nav-item' href='/#home'>Home</a>
<a className='nav-item' href='/#about'>About</a>
<a className='nav-item' href='/#technical'>Technical Expertiese</a>
<a className='nav-item' href='/#project'>Projects</a>
<a className='nav-item' href='/#education'>Qualification</a>
<a className='nav-item' href='/#personal'>Personal Details</a>
...
And you should put id on every component as like as the project component.
If it doesn't work, please let me know or invite me to your GitHub repo.
Thanks.
Are you going to scroll down to the component when you click the navigation item on header?
For that you can use hash router.
For more detail about that, you can reference this site.
https://paulgrajewski.medium.com/using-context-and-hashrouter-in-react-87afcefc5966
Is it helpful for you?
I have a webapp that is deployed where the root is in the path of /exist/apps/my-app/. I have the following code implemented for the App.js:
import React from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
function App() {
return (
<Router basename={process.env.PUBLIC_URL}>
<Navbar bg="dark" variant="dark" fixed="top">
<Navbar.Brand href="/"><img alt="" src="https://avatars3.githubusercontent.com/u/2393489?s=200&v=4" weign="40" height="40"/> My React Application</Navbar.Brand>
<Nav className="mr-auto">
<Link to="/" className="nav-link">Home</Link>
<Link to="/features" className="nav-link">Features</Link>
<Link to="/pricing" className="nav-link">Pricing</Link>
</Nav>
</Navbar>
<div className="full">
<Switch>
<Route path="/features">
<h1>Features</h1>
</Route>
<Route path="/pricing">
<h1>Pricing</h1>
</Route>
<Route path="/">
<h1>Home</h1>
</Route>
</Switch>
</div>
</Router>
);
}
export default App;
Clicking through the nav links navigates to the proper routing, but /exist/apps/my-app disappears from the URL displayed. How do I keep the missing part of the URL in the Location bar?
process.env.PUBLIC_URL contained a period only.
I found two solutions.
First was to hard code basename={'/exist/apps/my-app'}.
The second and better approach was to eliminate basename all together and change BrowserRouter to HashRouter.
I eventually found the second approach and has the added benefit of being able to bookmark URLs containing a Route.
Checkout https://github.com/lcahlander/my-app for the sample eXist-db web application.
I am just trying to get React-Boostrap and React-Router up and running together. I used Create React App to create a simple shell.
This is my code, which does actual work nicely with React Router
import React, { Component } from "react";
import { RouteComponentProps, useHistory } from 'react-router';
import {
BrowserRouter as Router,
Switch,
Route,
useParams,
BrowserRouter
} from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import {
Nav,
Navbar
} from "react-bootstrap";
function Navigation() {
return (
<BrowserRouter >
<div>
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/about">About</Nav.Link>
<Nav.Link href="/users/1">/users/1</Nav.Link>
<Nav.Link href="/users/2">/users/2</Nav.Link>
<Nav.Link href="/users2/1">/users2/1</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users/:id" render={() => <Users />}/>
<Route path="/users2/:id" component={Users2} />
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</BrowserRouter >
);
}
class AppRouterBootstrap extends Component {
render() {
return (
<div id="App">
<Navigation />
</div>
);
}
}
export default AppRouterBootstrap;
function Home() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
function Users() {
// We can use the `useParams` hook here to access
// the dynamic pieces of the URL.
let { id } = useParams();
let history = useHistory();
const handleClick = () => {
history.push("/home");
};
return (
<div>
<h3>ID: {id}</h3>
<button type="button" onClick={handleClick}>Go home</button>
</div>
);
}
class Users2 extends React.Component<RouteComponentProps, any> {
constructor(props: any) {
super(props);
}
render() {
return (
<div>
<h1>Hello {(this.props.match.params as any).id}!</h1 >
<button
type='button'
onClick={() => { this.props.history.push('/users/1') }} >
Go to users/1
</button>
</div>
);
}
}
Which looks like this when rendered. Which looks ok, and actually works (on a navigation, and parameters etc etc point of view just fine)
However what I am noticing is that whenever I click on one of the React-Boostrap nav links, there is a FULL network reload occurring, if I monitor the Network tab. If I do not use React-Boostrap nav, but instead use a simple react-router and some Link from react-router. this full reload is not occurring. It only seems to happen when using React-Boostrap nav links
Does anyone know if this is normal, should React-Boostrap nav when used with React-Router be doing this. I guess its possible since its not using the inbuilt React-Router Link classes, but rather its own Nav based items.
Anyone have any ideas on this one?
The Nav.Link will refresh the pages by default (same functionality as a href).
You need to change it to <Nav.Link as={Link} to="/"> instead of <Nav.Link href="/"> to fix the same where Link is from react-router-dom
I'm fairly new to React and I'm trying to implement Navbar with react-bootstrap. I have the navigation bar set up but its not actually linking to any of my pages.
I've tried looking through the documentation but there's not much information there. I've looked at other posts but they all seem to be using older versions of react-bootstrap or not using it at all.
import React from "react";
import ReactDOM from "react-dom";
import "./components/stylesheets/index.css";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.min.css";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
serviceWorker.unregister();
import React, { Component } from "react";
import "./components/stylesheets/App.css";
import NavBar from "./components/NavBar";
import Home from "./components/Home";
import About from "./components/About";
class App extends Component {
render() {
return <NavBar />;
}
}
export default App;
import React, { Component } from "react";
import { Navbar, Nav, Form, FormControl, Button } from "react-bootstrap";
import "./stylesheets/NavBar.css";
class NavBar extends Component {
state = {};
render() {
return (
<div id="bar">
<Navbar bg="light" variant="light">
<Navbar.Brand href="#home">CALC-U</Navbar.Brand>
<Nav className="ml-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#about">About</Nav.Link>
<Nav.Link href="#updates">Updates</Nav.Link>
<Nav.Link href="#profile">Profile</Nav.Link>
</Nav>
</Navbar>
</div>
);
}
}
export default NavBar;
I want the app to open up to the Home page automatically, and then open up the other pages if the button is clicked on in the navBar.
Edit: I've created a working example, you can check the code: Codesandbox
Seems like you're not using react-router for handling the links.
First you need to wrap your component with a BrowserRouter like so:
import { BrowserRouter } from "react-router-dom";
import App from "./App";
const app = (
<BrowserRouter>
<App />
</BrowserRouter>
);
ReactDOM.render(app, document.getElementById("root"));
And in NavBar.js, inside a <Switch /> component, you declare the routes:
import { Switch, Route, Link } from "react-router-dom";
//(...)
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
In your case, you case use Link component inside your Nav.Link:
<Nav className="ml-auto">
<Nav.Link as={Link} to="/">Home</Nav.Link>
<Nav.Link as={Link} to="/about">About</Nav.Link>
</Nav>
Same applies if you want to add more links to the NavBar.
Sample application using react-bootstrap for Navbar
App.js
function App() {
return (
<div>
<Router>
<NavBar />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" exact component={About} />
<Route path="/updates" exact component={Updates} />
<Route path="/profile" exact component={Profile} />
</Switch>
</Router>
</div>
);
}
const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const Updates = () => <h1>Updates</h1>;
const Profile = () => <h1>Profile</h1>;
NavBar.js
class NavBar extends React.Component {
state = {};
render() {
return (
<div id="bar">
<Navbar bg="light" variant="light">
<Navbar.Brand href="/">CALC-U</Navbar.Brand>
<Nav className="ml-auto">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/about">About</Nav.Link>
<Nav.Link href="/updates">Updates</Nav.Link>
<Nav.Link href="/profile">Profile</Nav.Link>
</Nav>
</Navbar>
</div>
);
}
}