Every template comes with a set of ready-made pages that you can use to create other pages (e.g. Home, Secondary, Login, Sign up). You can build a SPA (single-page application) or create more pages accordingly with your needs. Let’s see how to do that.
All pages (or “views”) are stored into the src/views/ directory.
Create a new page
To add a new page, create a new file (for example, About.js
). Now import React and all required components, for example 👇
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;
Set a Route
Now you need to add a new route for the about page. Open the src/App.js
file to add a route 👇
render() {
return (
<ScrollReveal
ref="scrollReveal"
children={() => (
<Switch>
<AppRoute exact path="/" component={Home} layout={LayoutDefault} />
<AppRoute exact path="/about" component={About} layout={LayoutDefault} />
</Switch>
)} />
);
}
Choose a page layout
As you may noticed, every <AppRoute>
has a layout prop. That prop defines the layout to be used.
We have included 3 different page layouts, and they can be found in src/layouts
👇
LayoutDefault.js
is the default page layout, and it is made of a header, a main section that is supposed to include the “view” content and a footer.LayoutAlternative.js
is looks much like the previous one. In this layout we are including a different footer configuration (i.e. Footer – Config. 2).LayoutSignin.js
is the layout we are using for Login and Sign up pages. It doesn’t include a footer and header links are hidden.