ページの追加
現在はトップページのみですので、ページ追加をしてみましょう。
まず、appフォルダ内にページのフォルダを作成します。
ここでは「about」ページを作る想定です。
次にaboutフォルダ内にpage.jsを作成します。
page.jsに下記コンポーネントを定義します。
export default function About() {
return (
<div>
<h1>About Page</h1>
<p>これはAboutページです。</p>
</div>
);
}
これでブラウザでhttp://localhost:3000/aboutにアクセスすると、新しいページが表示されます。
トップページにリンク作成
トップページに先ほど作成したaboutページへのリンクを作成します。
Reactでは<Link>コンポーネントを使用することが推奨されているので、まずはwelcome.js内で<Link>コンポーネントをインポートします。
import Link from "next/link";
次にwelcomeコンポーネント内に<Link>コンポーネントを記述します。
<Link href="/about">About</Link >
ここで、
「JSX式には１つの親要素が必要です。」
というエラーが出ています。
これは
・コンポーネントのreturn内は１つのタグで囲われている必要がある。
という意味です。ですので、
<h1>タグと<Link>コンポーネントを１つのタグで囲んでみます。
エラーが消えました。
またReactではフラグメントというJSXの親要素用の特殊なタグが用意されています。
<></>書き方は他にもありますが、これで覚えてしまって良いです。
<div>を<>に置き換えてもエラーが出ません。
これで動作を確認してみましょう。
Aboutリンクをクリックすると
Aboutページに飛んでこれました。
Reactではこのようにしてページ作成ができます。
コメント