Version: 4.x

A Second Page and a Link

このブログの "About" ページを作って、この偉業の背後にいる天才たちについてみんなに知ってもらいましょう。ここでは、redwoodを使用して別のページを作成します：

yarn redwood generate page about

今回ルートパスを指定していないことに注意してください。もし redwood generate page コマンドでこれを指定しなかった場合、Redwood は Route を作成し、指定したページ名の前にスラッシュを付けたパスを与えます。この場合は /about となります。

Code-splitting each page

アプリにページを追加していくと、最初のページロード時にクライアントがダウンロードしなければならないコードが増えていくことが心配になるかもしれません。しかし、心配はいりません！Redwoodは各ページで自動的にコードを分割するので、最初のページロードは非常に速く、webpackバンドル全体のサイズへの影響を心配することなく、好きなだけページを作成することができます。もし特定のページをメインバンドルに含めたい場合は、デフォルトの動作を上書きできます。

http://localhost:8910/about で新しいページが表示されるはずです：

About page

しかし、手動でURLを変更しても誰も見つけてくれないので、ホームページとAboutページの双方向でリンクを張ってみましょう。まずHomePageに簡単なヘッダとナビゲーションバーをいっぺんに作成します：

JavaScript
TypeScript

web/src/pages/HomePage/HomePage.js
import { Link, routes } from '@redwoodjs/router'
import { MetaTags } from '@redwoodjs/web'

const HomePage = () => {
  return (
    <>
      <MetaTags title="Home" description="Home page" />

      <header>
        <h1>Redwood Blog</h1>
        <nav>
          <ul>
            <li>
              <Link to={routes.about()}>About</Link>
            </li>
          </ul>
        </nav>
      </header>
      <main>Home</main>
    </>
  )
}

export default HomePage

web/src/pages/HomePage/HomePage.tsx
import { Link, routes } from '@redwoodjs/router'
import { MetaTags } from '@redwoodjs/web'

const HomePage = () => {
  return (
    <>
      <MetaTags title="Home" description="Home page" />

      <header>
        <h1>Redwood Blog</h1>
        <nav>
          <ul>
            <li>
              <Link to={routes.about()}>About</Link>
            </li>
          </ul>
        </nav>
      </header>
      <main>Home</main>
    </>
  )
}

export default HomePage

ここでいくつか指摘しておきます：

Redwoodは Function Components が大好き。 React Hooksを多用していくが、これは関数コンポーネントでのみ有効。クラスコンポーネントを使うのは自由だが、特別な機能が必要でない限りは避けることを推奨する
Redwood の <Link> タグは、最も基本的な使い方として、1つの to 属性を取る。この to 属性は正しいURLを生成するために named route function を呼び出す。この関数は <Route> の name 属性と同じ名前を持つ：
<Route path="/about" page={AboutPage} name="about" />
もし redwood generate が作成したルート名やパスが気に入らない場合は、 Routes.tsx で自由に変更してください！名前付きルート（named route）は素晴らしいものです。ルートに関連するパスを変更した場合（例えば /about から /about-us に変更）、 Routes.tsx で変更するだけで、名前付きルート関数（ routes.about() ）を使用しているすべてのリンクは正しい場所を指すようになります！また to 属性に文字列を渡すこともできますが（ to="/about" ）、もしパスが変更された場合は、すべての /about インスタンスを見つけて /about-us に書き換えなければなりません。

Back Home

Aboutページに遷移したら戻れなくなっているので、ここにもリンクを追加しておきましょう：

JavaScript
TypeScript

web/src/pages/AboutPage/AboutPage.js
import { Link, routes } from '@redwoodjs/router'
import { MetaTags } from '@redwoodjs/web'

const AboutPage = () => {
  return (
    <>
      <MetaTags title="About" description="About page" />

      <header>
        <h1>Redwood Blog</h1>
        <nav>
          <ul>
            <li>
              <Link to={routes.about()}>About</Link>
            </li>
          </ul>
        </nav>
      </header>
      <main>
        <p>
          This site was created to demonstrate my mastery of Redwood: Look on my
          works, ye mighty, and despair!
        </p>
        <Link to={routes.home()}>Return home</Link>
      </main>
    </>
  )
}

export default AboutPage

web/src/pages/AboutPage/AboutPage.tsx
import { Link, routes } from '@redwoodjs/router'
import { MetaTags } from '@redwoodjs/web'

const AboutPage = () => {
  return (
    <>
      <MetaTags title="About" description="About page" />

      <header>
        <h1>Redwood Blog</h1>
        <nav>
          <ul>
            <li>
              <Link to={routes.about()}>About</Link>
            </li>
          </ul>
        </nav>
      </header>
      <main>
        <p>
          This site was created to demonstrate my mastery of Redwood: Look on my
          works, ye mighty, and despair!
        </p>
        <Link to={routes.home()}>Return home</Link>
      </main>
    </>
  )
}

export default AboutPage

素晴らしい！ブラウザで試して、行き来できることを確認してください。

世界レベルの開発者であれば、コピー＆ペーストされた <header> を見て、ウッてなったことでしょう。わかります。そのため、Redwoodには Layouts というちょっとしたナニカがあります。

A Second Page and a Link

Back Home​

Back Home