I want to change my navbar title to log out after I logged in, however, my auth check function is in my login component class, how can I link them up as this nav is not a component itself.
import React from 'react';
import { Link } from 'react-router-dom';
const Header = () => (
<nav className="navbar navbar-dark bg-dark navbar-expand-lg">
<Link to="/" className="navbar-brand">Home</Link>
<div className="collpase navbar-collapse">
<ul className="navbar-nav mr-auto">
<li className="navbar-item">
<Link to="/login" className="nav-link">{}</Link>
</li>
<li className="navbar-item">
<Link to="/Signup" className="nav-link">Sign up</Link>
</li>
</ul>
</div>
</nav>
);
export default Header;
you have to put the state that holds the logging data in high place so you could pass the data to all the components below it.
redux makes it much easier.
Related
Below are my Header.js component and App.js respectively,
// Header.js
import React from 'react'
import { Link } from 'react-router-dom'
const Header = () => {
return (
<div className='header'>
<nav>
<div className= 'logo'>
<h1>
Damien
</h1>
</div>
<ul className='ul-items'>
<li>
<Link to= '#'>Home
</Link>
</li>
<li>
<Link to= '#'>Projects
</Link>
</li>
<li>
<Link to= '#'>About
</Link>
</li>
<li>
<Link to= '#'>Contact
</Link>
</li>
<li>
<Link to= '#'>Services
</Link>
</li>
</ul>
</nav>
</div>
)
}
export default Header;
//App.js
```
import './App.css';
const App = () => {
return (
<div className="App">
<Header/>
</div>
);
}
export default App;
```
Idk what else to try, Ive looked on youtube for tutorials and googled my problem and have found nothing
I think it is beacause you use <Link> from react-router-dom but you didn't set a Router
https://v5.reactrouter.com/web/guides/quick-start/1st-example-basic-routing
you must checkout your "scripts section" in your package.json document
also checkout if you are in the right Working Directory for execute the script "start" place in the project folder
Any idea on how to collapse the navbar on mobile when selecting the menu link pages.
here is the codesandbox link, feel free to fork it.
https://codesandbox.io/s/it6lj
Thanks!
I ran into this issue using Reactstrap 9.0.0-2 (based on Bootstrap 5.1.0 css library). I'm not sure if it was a problem with earlier (more stable) releases. Already had an idea in mind of how to get the menu to close on NavLink select, but wanted to see how other people solved the problem for some new ideas and experiences.
I tried the first accepted answer, adding the data-attributes and data-target
on the NavLinks, and pointing at a css #id attribute on the NavbarToggler. This didn't work for me, unfortunately.
Instead, I solved the issue by setting up a click handler for the <NavLink /> tags, independent of the handler that toggles the menu. Unlike the other handler that opens and closes the menu, the NavLink handler only closes it by directly setting the menu's state object to false.
The logic goes: the menu has to be open in order to click on the <NavLink />, so this NavLink handler does not need to open the menu. And once you've made your choice about where you'd like to go, and have clicked on a Navlink tag, you'd probably like the menu to close and get out of your way, rather than having to close it yourself manually.
Simplified example:
import React, { useState } from 'react';
import { Collapse, Nav, NavBar, NarbarBrand, NavbarToggler, NavItem } from 'reactstrap';
import { NavLink } from 'react-router-dom';
const Header = (props) => {
const [menuOpen, setMenuOpen] = useState(false); // initially closed
const toggleMenu = () => { // this handler is "regular"
setMenuOpen(!menuOpen); // open and close...
};
const closeMenu = () => { // ... and this one only
setMenuOpen(false); // closes it ...
};
return (
<NavBar expand="md">
<Collapse isOpen={menuOpen} navbar>
<Nav navbar>
<NavLink
to="/blog/:article"
className="navlink text-light shadow-lg"
onClick={closeMenu}
>
{blogArticle.title}
</NavLink>
// . . . and so on . . .
Sometimes the simplest solutions are also the best...
Add data-toggle="collapse" and data-target="#navbarCollapse" to each NavLink to also toggle closed the menu.
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<NavLink
data-toggle="collapse"
data-target="#navbarCollapse"
className="nav-link"
activeClassName="active"
to="/"
exact
>
Home
</NavLink>
</li>
<li className="nav-item">
<NavLink
data-toggle="collapse"
data-target="#navbarCollapse"
className="nav-link"
activeClassName="active"
to="/about"
>
About
</NavLink>
</li>
you can manage the menu visibility using a state:
import { useState } from "react";
import { NavLink } from "react-router-dom";
const Navbar = () => {
const [show, setShow] = useState(false);
const handleNavClick = () => {
setShow(false);
};
return (
<nav className="navbar navbar-expand-md navbar-dark bg-dark">
<a className="navbar-brand" href="/">
Fixed navbar
</a>
<button
className="navbar-toggler"
type="button"
onClick={() => setShow(!show)}
>
<span className="navbar-toggler-icon" />
</button>
<div
className={`collapse navbar-collapse ${show ? "show" : ""}`}
id="navbarCollapse"
>
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<NavLink
onClick={handleNavClick}
className="nav-link"
activeClassName="active"
to="/"
exact
>
Home
</NavLink>
</li>
<li className="nav-item">
<NavLink
onClick={handleNavClick}
className="nav-link"
activeClassName="active"
to="/about"
>
About
</NavLink>
</li>
</ul>
</div>
</nav>
);
};
export default Navbar;
You can use useRef hook for this and handle the class attribute of the div.
const collapseRef = useRef(null);
const hideBars = () => {
collapseRef.current.setAttribute("class", "navbar-collapse collapse");
};
<div
className="collapse navbar-collapse"
id="navbarCollapse"
ref={collapseRef}
>
and then in your NavLink
<NavLink
className="nav-link"
activeClassName="active"
to="/about"
onClick={hideBars}
>
About
</NavLink>
Check this sandbox
if some still have this issue in bootsrap 5 just add these props to the li tag like this:
<li className="nav-item" data-bs-toggle='collapse' data-bs-target='.navbar-collapse.show'>
<Link className="nav-link" to="/">
<img src={homepage_icon} className='nav-item-icon' />
<h6>Page d'accueil</h6>
</Link>
and you end up by collapsing navbar
I know my path is correct because it takes the styles if I don't add module to the extension. I'm working from a bootcamp which is over a year and a half old and trying to research any potential breaking changes, but having no such luck.
Says link is not defined and my scss file has no default export.
Thanks
.link {
color: green;
}
import React from "react"
import { Link } from "gatsby"
import headerStyles from "../styles/header.module.scss"
const Header = () => {
return (
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li>
<Link className={headerStyles.link} to="/">
Home
</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/blog">Blog</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
</header>
)
}
export default Header
import React from "react"
import { Link } from "gatsby"
import headerStyles from "../styles/header.module.scss"
const Header = () => {
return (
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li>
<Link className={headerStyles.link} to="/">
Home
</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/blog">Blog</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
</header>
)
}
export default Header
After updating gatsby to version 3, I was in the same situation.
* as sth would be fine if you want to import an entire module.
import * as headerStyles from "../styles/header.module.scss"
import { link } from "../styles/header.module.scss"
Fixed it moments after posting with destructuring.
import * as headerStyles import './header.module.scss'
I am trying to add the Auth0 button to a navbar but the jsx linter does not like it when I add javascript. I need the conditional so it shows up for non registered users. I have tried importing it from another component ion React as well as adding it directly in the jsx with no luck. I keep getting isAuthenticated' is not defined and loginWithRedirect' is not defined. Not sure what to do next. Thanks.
import $ from 'jquery'
import '../styles/nav.scss'
import button from '../components/GoogleButton/Button.jsx'
import { auth0 } from './auth0/react-auth0-spa'
export default class NavBar extends Component {
componentDidMount() {
$(document).ready(function() {
$('.mobile-button a').click(function(e) {
$(this)
.parent()
.parent()
.toggleClass('open')
$(this).html($(this).html() === 'Close Menu' ? 'Menu' : 'Close Menu')
e.preventDefault()
})
})
}
render() {
return (
<div>
<header class='header'>
<div class='container'>
<h1 class='site-title'>Super Cool Web App!</h1>
<span class='site-tagline'>Because Andy made this!</span>
</div>
</header>
<nav class='main-nav'>
<div class='container'>
<ul>
<li class='mobile-button'>
<a href='/'>Menu</a>
</li>
<li>
<a href='/'>About</a>
</li>
<li>
{/* this is where the problem lies */}
{!isAuthenticated && (
<button onClick={() => loginWithRedirect({})}>Log in</button>
)}
</li>
<li>
<a href='/'>Methods</a>
</li>
<li>
<a href='/'>Results</a>
</li>
<li>
<a href='/'>Contact</a>
</li>
<li>
<a href='/'>Methods</a>
</li>
<li>
<a href='/'>Results</a>
</li>
<li>
<a href='/'>Contact</a>
</li>
</ul>
</div>
</nav>
</div>
)
}
}```
authO is for initializing you need to use useAuthO to access the api elsewhere in your project.
Change your import statement to:
import { useAuth0 } from "../react-auth0-spa";
Then deconstruct AuthO methods isAuthenticated and loginWithRedirect.
Right under render and before your return put:
const {isAuthenticated , loginWithRedirect} = useAuth0
https://auth0.com/docs/quickstart/spa/react#create-the-navbar-component
I am making a single scroller page using React and want to navigate to a specific section of the page. In HTML we use an href and anchor tag to achieve this interaction.
I found a React library called react-scroll but I do not know how to link each component in different folders from the a link in the NavBar component. My NavBar has multiple links for scrolling to a section/ component. Any help would really be appreciated!
import React, { Component } from "react";
import { Link, animateScroll as scroll } from "react-scroll";
class Navbar extends Component {
render() {
return (
<nav className="navbar navbar-expand-lg navbar-dark">
<Link className="navbar-brand" to="/">
CMD <span>Custom Movie Database</span>
</Link>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon" />
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item ">
<Link
className="nav-link"
to="/"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Home
</Link>
</li>
<li className="nav-item">
<Link
className="nav-link"
to="/"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Search
</Link>
</li>
<li className="nav-item">
<Link
className="nav-link"
to="/"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Category
</Link>
</li>
<li className="nav-item">
<Link
className="nav-link"
to="/"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Popular
</Link>
</li>
<li className="nav-item">
<Link
className="nav-link"
to="/"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Trailer
</Link>
</li>
<li className="nav-item">
<Link
className="nav-link"
to="/"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Article
</Link>
</li>
<li className="nav-item">
<Link
className="nav-link"
to="/"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Contact
</Link>
</li>
</ul>
</div>
</nav>
);
}
}
export default Navbar;
This is Home Component where all component is added
class Home extends React.Component {
render() {
return (
<React.Fragment>
<Navbar />
<Showcase />
<FormWrapper />
<CategoryList />
<MovieGrid />
<MovieTrailer />
<ArticleGrid />
<Footer />
</React.Fragment>
);
}
}
react-scroll is a great library - let me try and explain how I understand it.
Wherever I need a Link that scrolls to a certain element, I import that link, define it, and render it:
import React, { Component } from 'react'
import Scroll from 'react-scroll'
const ScrollLink = Scroll.ScrollLink
class Navbar extends Component {
render() {
return (
<nav>
<ScrollLink
to="example-destination"
spy={true}
smooth={true}
duration={500}
className='some-class'
activeClass='some-active-class'
>
Link Text Goes Here
</ScrollLink>
</nav>
)
}
export default Navbar;
In a separate file, we define the destination that the `Link` will scroll to. The `Element` import from react-scroll makes this pretty easy!
import React, { Component } from 'react'
import { Element } from 'react-scroll'
export default function () {
return (
<React.Fragment>
<Element id='example-destination' name='example-destination'>
// wrap your content in the Element from react-scroll
</Element>
</React.Fragment>
)
}
Making sense? Let me know if I can expand on this further!
Other Alternative:
Put an id in component that you want to go:
<div id='some-id'>
</div>
After that, call from any place:
const anchor = document.querySelector('#some-id')
anchor.scrollIntoView({ behavior: 'smooth', block: 'center' })
Just building upon Diego Baranowski's solution. Made a onClick event listener for an element by clicking which your view is being scrolled down to the anchor element. Works just fine. I am a newbie so hopefully it does not defy React concept.
<div
style={{"cursor":"pointer"}}
onClick={() => {
const anchor = document.querySelector('#reviews-link')
anchor.scrollIntoView({ behavior: 'smooth', block: 'center' })
}}
>
<Rating
rating={rating}
numReviews={numReviews}
></Rating>
</div>
A more React-friendly solution would be to get a reference to the element by using a "ref" (with useRef if it is a function component), instead of trying to access the DOM directly with document.querySelector.