How can I hide the navbar on my landing page('/')? I have tried using this.props.location and extending the navbar component and that dose not seem to work. I know this is simple but I can not for the life of me remember how to do it! I would rather not render the component just on the pages that I want to display it.
App.js
import React from 'react'
import Navbar from './Components/Navbar'
import {BrowserRouter as Router, Route} from 'react-router-dom';
import Home from './Components/Home'
import Welcome from './Components/Welcome'
import About from './Components/About'
import Contact from './Components/Contact'
function App() {
return (
<>
<useLocation>
{({ useLocation }) => {
if (useLocation.pathname !== "/") { return <Navbar/>; } }
}
</useLocation>
<Router>
<Route exact path="/" component={Welcome}/>
<Route path="/Home" component={Home}/>
<Route path="/About" component={About}/>
<Route path='/Whitepaper' component={WhitePaper}/>
</Router>
</>
);
}
export default App;
Navbar.js
import React from 'react';
import { Link } from 'react-router-dom';
import "../Component Stylesheets/Navbar.css"
const Navbar = (props) =>{
return(
<>
<nav className='navbar'>
<Link to="/Home">
<div className="logo"></div>
</Link>
<Link to="/Home">
<li className="nav-item nav-link">Home</li>
</Link>
<Link to="/About">
<li className="nav-item nav-link">About</li>
</Link>
<Link to="/Contact">
<li className="nav-item nav-link">Contact</li>
</Link>
</nav>
</>
)
}
export default Navbar
You can check what page it is and show it then. I think you mentioned trying this but you just might have been doing it the wrong way.
{props.location.pathname !== '/' ? <Navbar /> : null}
you need to import Location from your react-router.
And use the Location data before your <Router> block.
Below is a sample from other react router library which should work same way for react-router as well:
<Location>
{({ location }) => {
if (location.pathname !== "/") { return <NavBar/>; } }
}
</Location>
or you can make use of useLocation Hooks
like below to get the current path and exclude NavBar component
let location = useLocation();
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>
);
}
How can i prevent the whole page/Navbar from reloading, i just want to load the components inside without reloading the whole page. I've mentioned both the components below.
App.js
import { useState } from 'react';
import Navbar from './Navbar'
import {BrowserRouter as Router, Routes, Route} from "react-router-dom";
import Home from './Home';
import ToDoList from './ToDoList';
import Jobs from './Jobs';
const App = () => {
return(
<>
<Router>
<Navbar />
<Routes>
<Route path='/' element={<Home />}/>
<Route path= '/todolist' element={<ToDoList />}/>
<Route path= '/jobs' element={<Jobs/>}/>
</Routes>
</Router>
</>
)
}
export default App
Navbar.js
const Navbar = () => {
return(
<nav>
<ul>
<li>
ToDoList!
</li>
<li>
Jobs
</li>
</ul>
</nav>
)
}
export default Navbar
Navbar will not rerender with your approach as it's above the router. So only Router component will be rendered for any change.
But issue here is you are using a tag which should not be used here as React is SPA you need to use <link to="/url">Text</link> Doc
So in Navbar.js just change your a tag to link with appropriate props and it will not rerender. Unless Parent component is going to rerender.
import {Link} from "react-router-dom";
const Navbar = () => {
return(
<nav>
<ul>
<link to="/"></link>
<li>
<link to="/todolist">ToDoList!</link>
</li>
<li>
<link to="/jobs">Jobs</link>
</li>
</ul>
</nav>
)
}
export default Navbar
I am trying to change the header to a link that calls for Homepage component. Right now it displays a logo title. But I want my users to be able to click on it to direct them to the landing page .
import React from 'react';
import { NavLink } from 'react-router-dom';
import AuthContext from '../../context/auth-context';
import './MainNavigation.css';
// import Homepage from '../../pages/Homepage';
const mainNavigation = props => (
<AuthContext.Consumer>
{context => {
return (
<header className="main-navigation">
<div className="main-navigation__logo">
<h1>Lux Lab Hair Salon</h1> // ....... change this to a link
</div>
<nav className="main-navigation__items">
<ul>
<li>
<NavLink to="/events">Available Hours</NavLink>
</li>
{!context.token && (
<li>
<NavLink to="/auth">Sing In | Sing Up</NavLink>
</li>
)}
{context.token && (
<React.Fragment>
<li>
<NavLink to="/bookings">Bookings</NavLink>
</li>
<li>
<button onClick={context.logout}>Logout</button>
</li>
</React.Fragment>
)}
</ul>
</nav>
</header>
);
}}
</AuthContext.Consumer>
);
export default mainNavigation;
<h1><NavLink to={'...'}>Lux Lab Hair Salon</NavLink></h1> or just a <NavLink style={{ fontSize: '20px' }}>Lux Lab Salon</NavLink>
So the problem is how to call for a component in a react navigation bar.
Here are the steps I followed to resolve the problem.
I imported BrowserRouter in App.js and used it to define the path of the homepage
in App.js
import {BrowserRouter, Route, Redirect, Switch} from 'react-router-dom';
import Homepage from './pages/Homepage';
class App extends Component {
render() {
return (<BrowserRouter>
<React.Fragment>
<Navigation/>
<Switch>
<Route path="/" component={Homepage}/>
<Route path="/nav1path" component={Page1Component}/>
<Route path="/nav2path" component={Page2Component}/>
{!this.state.token && <Redirect to="/" exact/>}
</Switch>
</React.Fragment>
</BrowserRouter>);
}
}
export default App;
Then I used the suggestion above to circle my H1 tag with NavLink.
<NavLink to={'/'}>
Header title
Also don't forget to import other components before you call them inside Route.
I have a homepage with a link to a form, like this:
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Route,
NavLink,
Redirect,
Switch,
withRouter
} from "react-router-dom";
import addHand from './Forms/addHand'
export class Home extends Component {
render() {
return (
<div>
<Router>
<div>
<NavLink to= '/hands/new'> Add a new hand </NavLink>
<Route path= '/hands/new' component={addHand}/>
<h4> Search For Hands By Category </h4>
<h4> Search For Sessions By Category </h4>
<h4> Search For Tables By Category </h4>
</div>
</Router>
</div>
);
}
}
export default Home;
I also have a navbar with a link to go home from any page, like this:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';
import unmountComponentAtNode from 'react-dom';
class NavBar extends Component {
render() {
return (
<div className="navbar">
<NavLink className="link"
to="/"
exact
>Home</NavLink>
</div>
);
}
};
export default NavBar;
If I go to the form, then change my mind and decide I want to go back to the homepage, the url changes when I press the navlink, but the form is still rendered on the homepage. I can keep going back and forth between routes, but the only way to get the form to unmount from the DOM is to refresh the page. What causes this behavior, and what can I do to fix it? I have experienced similar issues before in React but have never found the solution. Thanks!
Edit** I tried adding this to the navlink:
render() {
const refCallback = node => {
unmountComponentAtNode(node)
}
return (
<div className="navbar">
<NavLink className="link"
to="/"
exact
innerRef={refCallback}
>Home</NavLink>
</div>
);
}
};
as per the react router docs, but it gives me this error:
unmountComponentAtNode(...): Target container is not a DOM element.
Here is the code in app.js
import React, { Component } from 'react';
import './App.css';
import { Router, Route } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import Home from './Components/Home'
import Navbar from './Components/Navbar';
import addHand from './Components/Forms/addHand';
export const history = createBrowserHistory();
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title-top">Hi Adam, welcome to your Personal
Poker Universe!</h1>
<h1 className="App-title-middle">Not Adam? GTFO!</h1>
<h1 className="App-title-bottom">Just Kidding, you can stay</h1>
</header>
<Router history= {history}>
<div>
<Navbar/>
<Route exact path='/' component= {Home} />
</div>
</Router>
</div>
);
}
}
export default App;
Define one Router in your App.js:
<Router history={history}>
<Switch>
<Route exact path="/" component={Home} />} />
<Route path="/hands/new" component={addHand} />
</Switch>
</Router>
then try navigating between routes it should work. Please Let me know if it doesn't work
This is the routes.js where all the routes are managed.
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import App from './App';
import Home from './components/home/home';
import Products from './components/products/products';
import AboutUs from './components/aboutUs/aboutUs';
import Careers from './components/careers/careers';
const Routes = () => (
<Router>
<App>
<Route exact path="/" component={Home} />
<Route path="/products" component={Products} />
<Route path="/aboutus" component={AboutUs} />
<Route path="/careers" component={Careers} />
</App>
</Router>
);
export default Routes;
App.js
import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
import AppHeader from './components/appHeader/appHeader';
import AppFooter from './components/appFooter/appFooter';
class App extends Component {
render() {
return (
<div className="home">
<AppHeader/>
<div>{this.props.children}</div>
<AppFooter/>
</div>
);
}
}
export default App;
And inside my AppHeader i am using Link to redirect
<div className="nav-module menu-module">
<ul className="menu">
<li>
<Link to="/" className={this.getCurrentPath() == 'home' ? "current":""}>Home</Link>
</li>
<li>
<Link to="/products" className={this.getCurrentPath() == 'products' ? "current":""}>Products</Link>
</li>
<li>
<Link to="/aboutus" className={this.getCurrentPath() == 'aboutus' ? "current":""}>About Us</Link>
</li>
<li>
<Link to="/careers" className={this.getCurrentPath() == 'careers' ? "current":""}>Careers</Link>
</li>
</ul>
</div>
I have no clue why the application refreshes even after using <Link> from react-router-dom. Could version of react-router-dom be an issue or anything else i am missing.
Any help is appreciated .