I'm using Next.js latest version for making my blog website, don't know why show me error, when I'm trying to make my form then show me error like this:
Warning: Function components cannot be given refs.
Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
I'm tried below code:
import React, { useState } from "react";
import { APP_NAME } from "../config";
import Link from "next/link";
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
} from "reactstrap";
const Header = () => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<div>
<Navbar color="light" light expand="md">
<Link href="/">
<NavbarBrand className="font-weight-bold">{APP_NAME}</NavbarBrand>
</Link>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="m-auto" navbar>
<NavItem>
<Link href="/signup">
<NavLink style={{ cursor: "pointer" }}>Signup</NavLink>
</Link>
</NavItem>
<NavItem>
<Link href="/signin">
<NavLink style={{ cursor: "pointer" }}>Signin</NavLink>
</Link>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
);
};
export default Header;
please give me your valuable suggestion.
The easiest solution may be to wrap your NavLink with a native html element. In your case:
<Link href="/signup" passHref>
<a>
<NavLink style={{ cursor: "pointer" }}>Signup</NavLink>
</a>
</Link>
From the official documentation: if-the-child-is-a-function-component shows the right way when you wrap a custom function component within Link.
Add passHref attribute in Link.
Wrap your custom function component with React.forwardRef.
However, the NavbarBrand is not a component which you can manipulate. You can create a custom component to wrap NavbarBrand. It probably like
const CustomNavbarBrand = React.forwardRef(({ onClick, href }, ref) => {
return (
<NavbarBrand href={href} onClick={onClick} ref={ref}>
Click Me
</NavbarBrand>
)
})
<Link href="/" passHref>
<CustomNavbarBrand>{APP_NAME}</CustomNavbarBrand>
</Link>
Check the valid property which can be passed to NavbarBrand since I haven't use the reactstrap before.
This worked for me:
<Link href="/">
<div className="navbar-brand">
<a>{APP_NAME}</a>
</div>
</Link>
Instead of using the NavbarBrand component I just added the class navbar-brand
Solution :
Wrapp with anchor tag (a tag)
use passHref attribute
<Link href='/' passHref>
<a>
<Image src='logo.png' width="50px" height="50px" />
</a>
</Link>
Wrapping the child component in an a (anchor) tag resolved my issue.
Steps to reproduce :
Wrap around a component with the Link tag from Next JS
import Link from 'next/link'
import Image from 'next/image'
<Link href="/">
<Image width="100%"
height="100%"
src="/logo.png"
alt="Blitztech Electronics Logo" />
<Link>
Solution :
passing the 'important' passHref attribute
Wrapping the entire children in a a tag
There is a better way to solve this issue: whenever you are going to add a child tag under Link tag, such as an Image tag, just wrap them under a div or a tag. Here is the example:
<Link href="/">
<div>
<Image
src={Logo}
alt={TagName.COMPANY_NAME}
width={80}
height={80}
onClick={handleClicked}
/>
</div>
</Link>
Just Wrap it in anchor tag. it will work fine.
<Link href="/">
<a>{APP_NAME}</a>
</Link>
Related
I'm totally new with React and I'm facing off a problem with an external Link. I would like to use it for a redirection to GitHub every time I click on the icon but actually the new window is not showing up instead I have this URL :
http://localhost:3000/https://github.com. I don't why it is not working because with my footer i have almost the same code and it is working well. If you have solutions for that it will be much appreciated ! Thank you very much
Carditem.js
import React from 'react';
import { Link } from 'react-router-dom';
function CardItem(props) {
return (
<>
<li className='cards__item'>
<Link className='cards__item__link' >
<figure className='cards__item__pic-wrap' data-category={props.label}>
<img
className='cards__item__img'
alt='Travel '
src={props.src}
/>
</figure>
<div className='cards__item__info'>
<h5 className='cards__item__text'>{props.text}</h5>
<Link
class='social-icon-card-github'
to={{ pathname: "https://github.com" }}
<i class='fab fa-github' />
</Link>
</div>
</Link>
</li>
</>
);
}
export default CardItem;
Footer.js
import React from 'react';
import './Footer.css';
import { Link } from 'react-router-dom';
function Footer() {
return (
<div className='footer-container'>
<section class='social-media'>
<div class='social-media-wrap'>
<small class='website-rights'>© 2020</small>
<div class='social-icons'>
<Link
class='social-icon-link github'
to={{ pathname: "https://github.com" }}
target='_blank'
aria-label='Github'
>
<i class='fab fa-github' />
</Link>
<Link
class='social-icon-link codepen'
to={{ pathname: "https://codepen.io" }}
target='_blank'
aria-label='Codepen'
>
<i class='fab fa-codepen' />
</Link>
<Link
class='social-icon-link Linkedin'
to={{ pathname: "https://www.linkedin.com" }}
target='_blank'
aria-label='LinkedIn'
>
<i class='fab fa-linkedin' />
</Link>
</div>
</div>
</section>
</div>
);
}
export default Footer;
react-router is used for internal navigation, if you want to navigate outside of your website you should use an a element:
<a
class='social-icon-link github'
href="https://github.com"
target='_blank'
rel="noopener"
aria-label='Github'
>
<i class='fab fa-github' />
</a>
The rel="noopener" is a good security practice: https://mathiasbynens.github.io/rel-noopener/
You cannot call external links with react-router-dom's Link component. Try the following:
Link
You can also open links in a new tab:
Link in new tab
If your URL coming from the API's you can use like that
<Link to={{ pathname:`https://${strFacebook}`}} target="_blank"> Facebook </Link>
Hope you have understood.
The main fact is you need to use tag instead of tag.
Side by side you have to endure that the url must start with "https:" else it will always redirect to localhost:........
for example, if you write Github it will not work. You have to write Gitbuh
the link element is not closed
<Link
class='social-icon-card-github'
to={{ pathname: "https://github.com" }}>
<i class='fab fa-github' />
</Link>
Im trying to use this package to implement smooth scroll within a Navbar:
https://www.npmjs.com/package/react-scroll
Here's my navbar component:
Navbar.js
import React from "react";
import { Section1, Nav, NavLink, Bars, NavMenu } from "./NavbarElements";
import { Link, animateScroll as scroll } from "react-scroll";
const Navbar = () => {
return (
<>
<Section1>
<Nav>
<Bars />
<Link
activeClass="active"
to="section2"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Home
</Link>
<Link
activeClass="active"
to="section3"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Web
</Link>
<Link
activeClass="active"
to="section4"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
Games
</Link>
<Link
activeClass="active"
to="section5"
spy={true}
smooth={true}
offset={-70}
duration={500}
>
About
</Link>
</Nav>
</Section1>
</>
);
};
export default Navbar;
and here's my App.js
App.js
import React from "react";
import "./App.css";
import Navbar from "./components/navbar";
import HomeSection from "./components/home-section";
import WebSection from "./components/web-section";
import GameSection from "./components/games-section";
import AboutSection from "./components/about-section";
function App() {
return (
<>
<Navbar />
<HomeSection id="section2" />
<WebSection id="section3" />
<GameSection id="section4" />
<AboutSection id="section5" />
</>
);
}
export default App;
What am I missing? I thought I ID'd everything correctly but maybe not? Sorry im a noob. Any glaring issues here I'm missing? Is there a better way to implement one page smooth scrolling with react?
https://imgur.com/PvRRMPL
The way react component works that anything you put in the angle bracket its gonna take it as a props here you are not setting up and id you are passing down the prop to your components
<HomeSection id="section2" /> //this is passing props to your homeSection Component
here is how you can fix it:
const HomeSection (props) =>{
return(
<div id={props.id}> //your parent div
</div>
)
or you can wrap it like that
<div id="id="section2"">
<HomeSection />
</div>
If anyone ever sees this and needs a solution, you need to wrap <Element> tags around the component like so:
import { Element } from "react-scroll";
const HomeSection = () => {
return (
<>
<Element id="section2" name="home">
<Section2>
/* CODE */
</Section2>
</Element>
</>
);
};
export default HomeSection;
My first question on S.O. let's see how it goes.
I'm trying to set the "active class" to a variable in my Home.js, and pass down the value, as a prop to my <Buddy /> component. Once there I will set that to an integer to decide what slide my text carousel goes to. I'll figure out that part (but if you know, spare me the time).
I'm using an npm package react-scroll to scroll to that component once clicked. Then the component is set to "active". I will drop some code.
Nav bar section in the Home.js component..
return (
<div className="navBar">
<div className="navItem">
<Link
activeClass='active'
to="home"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
<h2>Home</h2>
</Link>
</div>
<div className="navItem">
<Link
activeClass='active'
to="projects"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
Projects
</Link>
</div>
<div className="navItem">
<Link
activeClass='active'
to="mission"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
Mission
</Link>
</div>
<div className="navItem">
<Link
activeClass='active'
to="about"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
About
</Link>
</div>
<div className="navBar">
<Link
activeClass='active'
to="contact"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
Contact
</Link>
</div>
</div>
My component sitting right beneath.
<Buddy />
Each component on my SPA/Portfolio has an id that the on my nav bar looks to go to.
//Projects.js
const Projects = () => {
return (
<div className="projectsComponent" id="projects">
</div>
)
}
So when it scrolls to the component, it sets that div? or component? to active.
// back in Home.js
<div className="navItem">
<Link
activeClass='active' <-----------
to="projects"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
Projects
</Link>
</div>
I just want to set whatever I need to, into a variable in Home.js to pass down as a prop to <Buddy />. Thanks, guys! Remember it's my first question ever! Be nice!
** If you have a better idea, like when the scroll reaches that component, set the index of my carousel to 1,2,3.. let me know too. Thanks
*** I will also include my <SpeechCarousel /> component here. It lives in my <Buddy /> component and ill pass another prop to it. Thanks again.
import React, {useState} from 'react'
import Carousel from 'react-bootstrap/Carousel'
import "../styles/css/Buddy.css"
const SpeechCarousel = () => {
const [index, setIndex] = useState(0);
const handleSelect = (selectedIndex, e) => {
setIndex(selectedIndex);
};
return (
<div id="carousel2">
<Carousel activeIndex={index} onSelect={handleSelect} interval={null}>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
</Carousel>
</div>
)
}
export default SpeechCarousel;
I am new to Nextjs. I have to have an active className when a nav-link is selected. I am using Nextjs+react-bootstrap in my project. The feature I want to implement is when someone clicks on a specific link it's colour should be changed
my Navbar component looks like this -
import React from "react";
import { Navbar, Nav, Button } from "react-bootstrap";
import Link from "next/link";
import "../../styles/Header.module.css";
const Header = () => {
return (
<div className="header">
<Navbar expand="lg">
<Link href="/">
<Navbar.Brand style={{ padding: "8px 50px" }}>
<img
src="/logo.svg"
left="60px"
top="25px"
width="112px"
height="23px"
className="d-inline-block align-top"
alt="Openhouse logo"
/>
</Navbar.Brand>
</Link>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav" className="justify-content-end">
<Nav className="ml-auto">
<Link href="/classes" passHref>
<Nav.Link style={{ padding: "8px 50px" }}>Classes</Nav.Link>
</Link>
<Link href="/clubs" passHref>
<Nav.Link style={{ padding: "8px 50px" }}>Clubs</Nav.Link>
</Link>
<Link href="/aboutUs" passHref>
<Nav.Link style={{ padding: "8px 50px" }}>AboutUs</Nav.Link>
</Link>
</Nav>
<Button variant="warning" size="sm">
Chat with us
</Button>
</Navbar.Collapse>
</Navbar>
</div>
);
};
export default Header;
This special version of the Link tag is called NavLink and adds styling attributes to the rendered element when it matches the current URL
The class is given to the element when it is active by writing:
<NavLink to="/about" activeClassName="active">
About
</NavLink>'
I work on a dashboard project at my job and I'm need your help.
React, nextjs and material-ui are used in my application.
On this website, a Menu is defined with clickable links for navigate between page.
However, I can not use correctly <Link> from next/link.
In my application, I need to use <Link/> with something like that:
import Foo from './foo';
[...]
<Link href="/about" passHref>
<Foo />
</Link>
[...]
<Foo/> is defined in another file and contain a <a>.
Even if I pass passHref my link can't be clicked.
In real life, my application is more complicated and use material-ui but the problem seems to be present with this really simplified version : https://gist.github.com/Oyabi/4aea0ce2fa36029868641d147ba9e551
Here the code if gist is down or removed in future:
pages/index.jsx:
import React from "react";
import Menu from "../components/Menu";
function Home() {
return <Menu />;
}
export default Home;
components/Menu.jsx:
import React from "react";
import Link from "next/link";
import MenuItem from "./MenuItem";
function Menu() {
return (
<Link href="/about" passHref>
<MenuItem />
</Link>
);
}
export default Menu;
components/MenuItem.jsx:
import React from "react";
import Link from "next/link";
function MenuItem() {
return (
<div>
<a>not ok - link is not clickable even if the following lines are commented</a>
<br />
<Link href="/about" passHref>
<a>ok - link is clickable</a>
</Link>
<Link href="/about" passHref>
<a>ok - link is clickable</a>
</Link>
<Link href="/about" passHref>
<div className="useless">
foo
<a>even with something more complicated</a>
<br />
<a>the 2 links are clikable</a>
bar
</div>
</Link>
</div>
);
}
export default MenuItem;
If I surround my <a> between <Link> in the same file everything is ok and work as desired but it's not the case if I apply <Link> on a component.
As you can see, even if I setpassHref.
How can I make my <Link> works in Menu.jsx?
Regards.
Try replacing the surrounding div by a fragment like that:
function MenuItem() {
return (
<> // here
<a>not ok - link is not clickable even if the following lines are commented</a>
<br />
<Link href="/about" passHref>
<a>ok - link is clickable</a>
</Link>
<Link href="/about" passHref>
<a>ok - link is clickable</a>
</Link>
<Link href="/about" passHref>
<div className="useless">
foo
<a>even with something more complicated</a>
<br />
<a>the 2 links are clikable</a>
bar
</div>
</Link>
</> // and here
);
}