Multiple pages on a Netlify github-deployed website?
Question
I recently deployed a website from Netlify using a demo GitHub repo that I copied. Although it seems pretty straightforward at first, I know too little about JS, HTML and CSS to continue. I'm only looking to host three pages that contain only text and hyperlinks, but I cannot for the life of me figure out how to implement more than one page with this particular code base I started with. Here's the index.js script:
import Head from 'next/head'
import Header from '@components/Header'
import Footer from '@components/Footer'
export default function Home() {
return (
<div className="container">
<div className="container-1">
<Head>
<title>Cool Page Title</title>
<link rel="icon" href="/coolicon.ico" />
</Head>
<div className="box-1">
<h3>Links</h3>
<p>
Current page <br />
Page 2 <br />
Another Page
</p>
</div>
<div className="box-2">
<h3>My cool page</h3>
<p>
Site under construction. <br />
For all inquiries, please call 555-5555
</p>
</div>
</div>
<div className="container-2">
<Footer />
</div>
</div>
)
}
The syntax is the really tricky part for me. The Home() function seems to return the html for the home page, so then how would I implement a second page and have the links change them out? Would a switch/case statement work here?
1 answers
solution1
0 ACCPTED 2022-08-18 13:28:45
Okay, so I figured out what I didn't previously understand. Turns out I was (unknowingly) using Next.JS. To handle multiple pages, I just created separate files, identical to the index.js file, but with a different file and function name, and then linked to them using:
<Link href="/">Home</Link> <br />
<Link href="/newpage">New Page</Link> <br />
Where the first link directs you to the index page and the second takes you to the page titled "newpage." Guess it really was that simple.
Oh, and I also had to include this import statement at the beginning of each file that used links:
import Link from 'next/link';
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.