Pages

No padrão MVC, a pasta Pages seria a camada responsável por apresentar as informações de forma visual ao usuário. Em seu desenvolvimento devem ser aplicados apenas recursos ligados a aparência como mensagens, botões ou telas.

Seguindo nosso processo de comparação o View está na linha de frente da comunicação com usuário e é responsável transmitir questionamentos ao controller e entregar as respostas obtidas ao usuário. É a parte da interface que se comunica, disponibilizando e capturando todas as informação do usuário.

O termo Pages vem da tradução "páginas", como o nome propriamente dita, será onde que estará as páginas do sistema com suas rotas definidas em Routes.js.

Aqui, iremos orientar como criar uma página própria.

Atenção!

Cada página deve exportar obrigatoriamente um objeto estendida de React.Component, caso o contrário, se configurará erro no sistema ao tentar compilar ou renderizar.

Saiba mais sobre import e export em: Como funciona o import e export do JavaScript?

Configurando

Passo 1 - Pasta da página

Por exemplo, iremos criar uma página inicial, para isso, iremos criar uma pastar no nome Home (o nome da pasta vai por sua escolha própria, ressalto que o nome deve estar em CamelCase) e dentro desta pasta, criaremos o arquivo index.js, teríamos algo parecido como:

src ├─ Pages │ ├─ Home │ │ └─ index.js │ └─ index.js

Passo 2 - Componente

Crie a exportação do objeto estendida de React.Component no arquivo index.js criada na pasta da página (seguindo no exemplo, na pasta Home).

Exemplos de código base:

Em Classe:

import React, { Component } from 'react';

export default class Home extends Component {
    constructor(props){
        super(props);
    }

    render(){
        return <div></div>
    }
}

Em Método Hook:

import React, { useState } from 'react';

export default function Home() {
  return (<div></div>);
}

Atenção!

É preciso que preste muita atenção e cuidado ao utilizar o Método Hook, buscando sempre em otimizá-lo.

Passo 3 - Defina a rota

Nessa parte é preciso bastante atenção!

No arquivo index.js da pasta root Pages (src/Pages/index.js), iremos tomas as seguintes etapas necessárias: importação e definição de rota.

Primeiro procedimento é importar sua página no cabeçalho deste arquivo, seguindo no exemplo anterior, veríamos algo do tipo:

//...
import Home from "./Home";

//...

No segundo procedimento é definir as rotas, as rotas dever ser inseridas antes da linha que contem o seguinte trecho de código:

//...

export default {pages}

Seguindo no exemplo anterior, veríamos algo do tipo:

//...

pages.push({
    "path":"/",
    "component": Home
});

export default {pages}

Repare que no JSON que estará utilizando para definir as rotas, temos os seguintes parâmetros:

path : string
- Parâmetro obrigatório. Ele define o caminho de como será convocado a página em questão, respeitando a regra de negócio de React Router DOM - path;
component : React.Component
- Parâmetro obrigatório que se deve passar a página que está sendo importada, respeitando a regra de negócio de React Router DOM - component;
...
- Além desses dois parâmetros obrigatórios, pode-se explorar outros diversos, disponíveis por React Router DOM - Route;

Contudo, veríamos o código todo como:

//...
import Home from "./Home";

//...

pages.push({
    "path":"/",
    "component": Home
});

export default {pages}

Atenção!

Esse passo só poderá ser feita se a página for de extrema importância e acessada pela barra de menu. Caso o contrário, a página poderá ser chamada ao longo de todo o projeto por através dos métodos de navegação.

Para saber como criar um botão na barra de menu, acesse aqui;

Extra

Navegando

A forma de como navegar por entre as páginas é bem simples que aproveita dos recursos de history.

O history disponibiliza as seguintes propriedades de ação:

history.push ( to : string , state ? : Object )

window.routerHistory.push("/home");

//ou

window.routerHistory.push("/home?the=query", { some: "state" });

//ou

window.routerHistory.push(
  {
    pathname: "/home",
    search: "?the=query",
  },
  {
    some: "state",
  }
);