React でページ作成
すべてのテンプレートには、他のページ (ホーム、セカンダリ、ログイン、サインアップなど) の作成に使用できる既製のページのセットが付属しています。 SPA (single-page application) を構築したり、ニーズに応じてさらに多くのページを作成したりできます。 その方法を見てみましょう。
すべてのページ (または「ビュー」) は src/views/ ディレクトリに保存されます。
ページを新たに作る
新しいページを追加するには、新しいファイル (About.js など) を作成します。 次に、React と必要なすべてのコンポーネントをインポートします。たとえば 👇
import React from 'react';
import GenericSection from '../components/sections/GenericSection';
import SectionHeader from '../components/sections/partials/SectionHeader';
import Cta from '../components/sections/Cta';
class About extends React.Component {
render() {
const sectionHeader = {
title: 'About us',
};
return (
<React.Fragment>
<GenericSection>
<SectionHeader
data={sectionHeader}
className='center-content'
/>
<p>Your content</p>
</GenericSection>
<Cta
topDivider
split
/>
</React.Fragment>
);
}
}
export default About;ルートをセット
次に、概要ページに新しいルートを追加する必要があります。 src/App.js ファイルを開いてルートを追加します 👇
render() {
return (
<ScrollReveal
ref="scrollReveal"
children={() => (
<Switch>
<AppRoute exact path="/" component={Home} layout={LayoutDefault} />
<AppRoute exact path="/about" component={About} layout={LayoutDefault} />
</Switch>
)} />
);
}ページレイアウトを選ぶ
お気づきかと思いますが、すべての <AppRoute> にはレイアウト プロパティがあります。 そのプロパティは、使用されるレイアウトを定義します。
3 つの異なるページ レイアウトが含まれており、それらは src/layouts にあります 👇
LayoutDefault.jsはデフォルトのページ レイアウトで、ヘッダー、“view”コンテンツを含むメイン セクション、およびフッターで構成されます。LayoutAlternative.jsは以前のものとよく似ています。 このレイアウトには、別のフッター構成 (つまり、フッター – 構成 2) が含まれています。LayoutSignin.jsは、ログイン ページとサインアップ ページに使用しているレイアウトです。 フッターは含まれず、ヘッダーのリンクは非表示になります。
既存のページ レイアウトを複製することで、必要な数のページ レイアウトを作成できます。