I'm using Link on react-router-dom and whenever I see my terminal it always says " 'Link' is defined but not used" but I already declared in on my code and my Link tag does not redirect on on a component it stays on the page and never refreshes it but the url changes
here's my block code on my div to Link:
import React from 'react';
import { Link } from 'react-router-dom';
import user from '../images/user.png';
const ContactCard = (props) =>{
const {id, name, email} = props.contact;
return(
<div className="item">
<img className="ui avatar image" src={user} alt="user"/>
<div className="content">
<Link to={`/contact/${id}`}>
<div className="header"> {name}</div>
<div>{email} </div>
</Link>
</div>
<i className="trash alternate outline icon right floated"
style={{color:"red"}}
onClick={()=> props.clickHandler(id)}>
</i>
</div>
);
};
export default ContactCard;
the error i'm getting:
Line 2:10: 'Link' is defined but never used
Try reinstalling react router and start the app over. Also, remove React.StrictMode - it prevents it from redirecting. It actually does but you have to refresh your page to see it.
Related
I am using Nextjs 13 with the experimental App Dir but am not sure if this problem I am facing has anything to do with the issue I am facing. I have an id in my home page of "faqs" and when I click on the link, I can see it successfully goes to that link but does nothing in the browser. If I am on another page, I click the link and it takes me to the home page with the correct url but still stays on the top of the page and does not scroll to the indicated id. I did implement scroll={false} as suggested in the documentation but it makes no difference.
Here is a snippet of the relevant code parts:
"use client"
import React, { useState } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
const Navigation = () => {
const router = useRouter()
...
In the return:
<Link scroll={false} href="/#faqs">FAQS</Link>
I Even tried:
<button type="button" onClick={() => router.push("/#faqs")}>FAQS</button>
In React the hash works fairly well but in next js, even only in client rendering it seems convoluted. If anyone knows what I am doing wrong or if there is a viable work around, I would sure appreciate it.
Thank you in advance.
If I am missing anything, please let me know.
I use hashtags a lot and I plan to start using the app directory in future projects, so I dug into this and it's not pretty. Apparently, NextJS uses a different package for app directory components client-side called "next/navigation". It's very different from "next/router". Also, when using "next/link" elements, NextJS does not trigger the onRouteChangeComplete event when location.hash changes but location.pathname does not.
So, in order to detect a hash change and scroll to the associated element, I finally had to implement this hack:
"use client"
import { Inter } from '#next/font/google'
import paragraph from './paragraph'
import Link from 'next/link'
import { useEffect, useState } from 'react'
const inter = Inter({ subsets: ['latin'] })
export default function Home() {
const [navClick, setNavClick] = useState(false);
useEffect(() => {
setTimeout(() => {
const hash = window.location.hash;
if (hash) document.querySelector(hash).scrollIntoView();
}, 0);
}, [navClick])
const toggleNavClick = () => setNavClick((oldVal) => !oldVal);
return (
<main>
<nav>
<ul>
<li>
<Link href="/#one" onClick={toggleNavClick}>Section One</Link>
</li>
<li>
<Link href="/#two" onClick={toggleNavClick}>Section Two</Link>
</li>
<li>
<Link href="/#three" onClick={toggleNavClick}>Section Three</Link>
</li>
</ul>
</nav>
<div className="container">
<section id="one">
<h1>Section One</h1>
<div dangerouslySetInnerHTML={{ __html: paragraph }} />
</section>
<section id="two">
<h1>Section Two</h1>
<div dangerouslySetInnerHTML={{ __html: paragraph }} />
</section>
<section id="three">
<h1>Section Three</h1>
<div dangerouslySetInnerHTML={{ __html: paragraph }} />
</section>
</div>
</main>
)
}
Since the hash change cannot be detected because no event is triggered, I basically created an event by toggling navClick each time a link is clicked. The navigation logic is enclosed in setTimeout() function because it triggers after window.location is updated.
Repo: https://github.com/designly1/next-hash-test
Demo: https://next-hash-test.vercel.app/
I am passing Data Through route State to open Contact Detail Page
Here is my Website You can Check The error When Click on Name Click Here
Here is How I am passing data
<Link to={`/contactdetail/${curlElem.name}`} state={{name: curlElem.name, email: curlElem.email}}>
<h4 className='header'>{curlElem.name}</h4>
<p>Email:{curlElem.email}</p>
</Link>
And Here You can See How i am receiving on Contact Detail Page to get COntact Details
import React from 'react'
import me from "../images/me3.jpg"
import {Link} from "react-router-dom"
import {useLocation} from "react-router-dom"
const ContactDetail = () => {
const location=useLocation();
const {name,email}=location.state;
// console.log(props.detailcontact);
// const{id,name,email}=props.detailcontact;
return (
<div className='main'>
<div className='ui card centered'>
<div className='image'>
<img src={me} alt="me"/>
</div>
<div className='content'>
<div className='header'>Name:{name}</div>
<div className='discription'>Email:{email}</div>
</div>
<div className="center-div">
<Link to="/">
<div><button className='ui button blue centered'>Back to Contact</button></div>
</Link>
</div>
</div>
</div>
)
}
the issue is when i go to contact Detail Page and refresh it i got an error
Update!....................
It was Not an Error of Route/state It was an error of Netlify
I solved it by Doing Adding netlify.toml file in Route Directory
[build]
command="npm run build"
publish="/build"
base="/"
[[redirects]]
from="/*"
to="/index.html"
status=200
I have a React.js based widget that I have embedded on a shopify website. It works great for most sites.
For one site, the ajax-cart.js.liquid code is causing a problem with the react router and the page url changes and the page hosting the widget loads that url - causing a 404.
How can I ringfence the React App and Router functionality so that it is not broken or taken over by page js?
Here you can see it working correctly. Click the P bottom right and click Join.
https://www.puctto.me/collections/all
Here you can see it not working. Click the P. The url bar changes and the page navigates.
https://shoezie.com.au/
I'm loading ReactRouter like this:
import React from "react";
import {
Switch,
Route,
Redirect
} from "react-router-dom";
import { MemoryRouter } from 'react-router'
import axios from "axios";
export default class App extends React.Component {
//app code
}
And then in my FooterGuest component I have used Link from react-router
import React from "react";
import {
// BrowserRouter as Router,
// Switch,
// Route,
Link
} from "react-router-dom";
export function FooterGuest(){
return (
<div className="widget-footer widget-footer--login ">
<h3 className="widget-footer-header ">
Sign in to upload your own photo
</h3>
<div className="widget-footer__register-bar">
<Link to="/signin" className="ui inverted button" >Sign In</Link>
<Link to="/join" className="ui inverted button" >Join</Link>
</div>
</div>
)
}
You could try to add this to prevent the redirect:
export function FooterGuest(){
const stopPropagation = (e)=>{
e.stopPropagation()
}
return (
<div className="widget-footer widget-footer--login ">
<h3 className="widget-footer-header ">
Sign in to upload your own photo
</h3>
<div className="widget-footer__register-bar">
<Link to="/signin" className="ui inverted button" onClick={stopPropagation} >Sign In</Link>
<Link to="/join" className="ui inverted button" onClick={stopPropagation} >Join</Link>
</div>
</div>
)
}
In my ReactJS app (create-react-app) I have an anchor tag with a good old href attribute pointing to an external URL, www.google.com, and when I click on that DOM element, the app appends the target URL to the http://localhost:3000 and the URI becomes http://localhost:3000/www.google.com
What am I missing?
I have tried setting rel={'external'} and have tried handling it through onClick={()=>{window.location.assign("www.google.com")}
import React from "react";
import {NavLink, Redirect} from "react-router-dom";
import TextLink from "../textLink/TextLink";
import "./footer.css";
/**
*
* #param {{theme: string}} props
*/
const Footer = props => {
const { theme } = props;
return (
<div className={`footer footer-${theme}`}>
<div className="wrapper">
<div id="social-media-icons">
<NavLink to={"/contact-us"}>
<i className="fab fa-facebook" />
</NavLink>
<a rel={'external'} className="fab fa-instagram" href={"www.google.com"} />
</div>
</div>
</div>
);
};
export default Footer;
I want the browser to redirect me to only www.google.com and should get out of the app basically. Even better, open a new window or tab in the browser with the desired URL.
Try this
<a rel={'external'} className="fab fa-instagram"
target="_blank" href={"https://www.google.com"} />
this will open new tab
target="_blank"
and this will open google.com
href={"https://www.google.com"}
If you don't add https:// at the begining of the href browser will consider it as local link.
error - React.Children.only expected to receive a single React element child.
There were quite a few questions with the same context, I tried those solutions but have not found a solution.
The Navbar of the website is what is giving me the error. There is a section over the Navbar which renders properly, when I try to render the Navbar below it throws the error.
import Link from 'next/link'
import Head from '../components/head'
import Download from '../components/nav'
import NavBar from '../components/header'
import Footer from '../components/footer'
import htmlContent from 'html-loader!../legacy/index.html'
const Homepage = () => (
<div>
<Head />
<Download/>
<NavBar />
<div dangerouslySetInnerHTML={{__html: htmlContent}} />
<Footer />
</div>
);
export default Homepage
The footer shows properly, head tag is for all the meta data etc(also works). Github link to all the code is-https://github.com/yohanelly/website-jsx/tree/master/components
The problem is with the whitespace between the Link and the a tag.
<Link href="#"> <a className="menu-links features">Features</a></Link>
should be either
<Link href="#"><a className="menu-links features">Features</a></Link>
or
<Link href="#">
<a className="menu-links features">Features</a>
</Link>
Read the Children in JSX section of the React docs for more info.