Can anyone tell me why the following Link Component is unable to find the linked page? VSCode is literally auto-completing the file name as I type it in but for some reason I keep getting 404.
//index.js in WelcomePage folder
import styles from "/styles/WelcomePage.module.css";
import Link from "next/link";
function WelcomePage() {
return (
<>
<h1 className={styles.title}>This is the Title</h1>
<Link href="/pages/ClassSearch">Class Search</Link>
</>
);
}
export default WelcomePage;
//index.js in ClassSearch folder
function ClassSearch() {
return <h1>The Class Search Page</h1>;
}
export default ClassSearch;
I think you need to link /ClassSearch instead of pages/ClassSearch
If you create pages/ClassSearch/index.js that exports a React component , it will be accessible at /ClassSearch
// <Link href="/pages/ClassSearch">Class Search</Link>
<Link href="/ClassSearch">Class Search</Link>
You can check , Next Page Doc
https://nextjs.org/docs/basic-features/pages
Related
I created a new next app and installed the newest version. I am testing out the app dir and encountered an error.
When I continually switch between the about and contact page and refresh the page at the same time like in this video
This error shows up
This only happens if the Footer component is added. If I remove the Footer component this will not happen
app/about/page.js
import Link from 'next/link'
import { Footer } from '../Footer'
export default function Page() {
return (
<>
<Link href="/about">about</Link>
<Link href="/contact">contact</Link>
<Footer />
</>
)
}
app/contact/page.js
import Link from 'next/link'
import { Footer } from '../Footer'
export default function Page() {
return (
<>
<Link href="/about">about</Link>
<Link href="/contact">contact</Link>
<Footer />
</>
)
}
app/footer.jsx
export function Footer() {
return (
<footer>Footer</footer>
)
}
Github Repo
I was able to reproduce the error after following the OP's instructions to refresh quickly ("spam refresh") several times.
I am able to solve the error by making the Footer component exported in Footer.jsx a default export, rather than named export.
Simply change the function in Footer.jsx to read:
export default function Footer() {
...
}
And update the Footer imports within the pages, i.e.
// app/about/page.js
import Footer from '../Footer'
...
// app/contact/page.js
import Footer from '../Footer'
...
🌶️ The ... ellipses are for example, obviously not legitimate JavaScript! Replace with your code.
when i enable nextjs 13 appDir feature and add a Link i get and error of
" Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'call') "
in the console i also see another error
" Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering. "
here is my code
import Link from 'next/link';
function Header() {
return (
<div>
<Link href="/">Home</Link>
</div>
);
}
export default Header;
inside the appDir i have
layout.tsx
page.tsx
head.tsx
Header.tsx
i havnt yet changed anything in any of them expect that i added the Header component in the layout.tsx
import Header from './Header';
import '../styles/globals.css';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<head />
<body>
<Header />
{children}
</body>
</html>
);
}
ONLY WHEN I AM ADDING 'LINK'
if im not using the appdir and using good old ./pages it's fine..
what's wrong here ? because i saw many tutorials and im just copying and pasting i also get the same error when adding Link
I am running into a strange problem with the Link component from react-router-dom. I am trying to create a link with Anchor, but as soon as I put the tag in the page shows nothing - just blank. When I remove the tag, the page shows correctly with the content again.
I have imported Link from react-router-dom version 6.3.0. And this code is from a laravel installation.
My code -
import { Link } from "react-router-dom"
export default function App() {
return <>
<div>
<h1>The main app!</h1>
<Link to="/">Test</Link>
</div>
</>
}
I am facing an issue with routing and links in Nextjs. I have created a blog like page using React+Typescript and I would like to use the same code in Nextjs. I was initially using import {Link} from 'react-router-dom'; .However since this link doesn't work with Nextjs, I have used the link/next import.
The issue is when, I try to click on "Aboutus" of my Navbar, I get the following error:
404
This page could not be found.
Here is the code of my Navbar.tsx
import React from 'react';
import Link from 'next/link';
const Navbarr : React.FC = () => {
return (
<div>
<AppName >
<Link href="/"><a>Abc</a></Link>
</AppName>
<Button>
<Link href="/new">
<a>Aboutus</a>
</Link>
</Button>
</div>)}
export default NavBarr;
In Next.js when a file is added to the pages directory it's automatically available as a route.
I suggest you to read https://nextjs.org/docs/routing/introduction
I'm trying to add the scroll function in script tags to this header component in Gatsby. I know it could work in html and not in react, but what is the right way to do it? Thanks!
import React from 'react'
import Link from 'gatsby-link'
import './header.css'
const Header = () => (
<div className='Header'>
<div className='HeaderGroup'>
<Link to='/'><img src={require('../img/logo_nav.png')} width='60' /></Link>
<Link to='/index'>Selected Works</Link>
<Link to='/uber'>Uber Thoughts</Link>
<Link to='/awards'>Awards</Link>
<Link to='/about'>About</Link>
</div>
</div>
)
export default Header
<script>
$(window).scroll(function () {
if ($(window).scrollTop() > 10) {
$('.Header').addClass('floatingHeader');
} else {
$('.Header').removeClass('floatingHeader');
}
}
</script>
If you want scripts to load before the DOM is ready you can add your scripts inside html.js file.
From the Gatsby docs:
Gatsby uses a React component to server render the and other
parts of the HTML outside of the core Gatsby application.
Read more about it here.
In your case, what you can do is to write your script inside the componentDidMount react lifecycle method, because you need access to the DOM (as you're using jQuery there) you need to run the script after the body has been loaded, so placing your script in the <head> won't work, you need to add it inside the componentDidMount method by first making your component a class component to get access to the react lifecycle methods.
import React from 'react'
import Link from 'gatsby-link'
import $ from 'jquery'
import './header.css'
class Header extends React.Component {
componentDidMount () {
$(window).scroll(function () {
if ($(window).scrollTop() > 10) {
$('.Header').addClass('floatingHeader');
} else {
$('.Header').removeClass('floatingHeader');
}
})
}
render () {
return (
<div className='Header'>
<div className='HeaderGroup'>
<Link to='/'><img src={require('../img/logo_nav.png')} width='60' /></Link>
<Link to='/index'>Selected Works</Link>
<Link to='/uber'>Uber Thoughts</Link>
<Link to='/awards'>Awards</Link>
<Link to='/about'>About</Link>
</div>
</div>
)
}
}
export default Header
You can also use a Gatsby layout template like the gatsby-starter-blog project and put your script at the bottom of the {children} call as a <script>Your script</script> and it will be available in all your pages, same as using the html.js file but since you need access to the DOM you need to put it inside the body for your script to work (more info about Gatsby layouts here).