✨ Get all templates and new upcoming releases for just $69. Limited time offer ✨

Create pages in React

Cruip CSS

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.
You can create how many page layouts you want by duplicating the existing ones.
Last updated on August 17, 2021