.Net Core - ReactJS - Rotas

Na aula de hoje iremos criar o componente Clientes.

Vamos também fazer algumas refatorações, organizando a estrutura das pastas.

Na pasta src, criaremos uma pasta view e dentro desta pasta, teremos a pasta shared

views

shared

Vamos instalar um plugin para utilizar as rotas na aplicação React

        
          yarn add react-router-dom

No arquivo index.html, iremos retirar a tag < React.StrictMode> e acrescentar a tag < BrowserRouter>, fazendo o import do BrowserRouter, Switch e Route para criarmos as rotas da aplicação.

        
          import { BrowserRouter, Switch, Route } from 'react-router-dom'
          import Clientes from './views/Clientes';
          < BrowserRouter>
            < Switch> 
              < Route path="/" exact={true} component={App} />
              < Route path="/clientes" component={Clientes} />
            < /Switch> 
          < /BrowserRouter>

Vamos criar o componente Clientes

        
          import React, { Component } from 'react';
          import Header from './shared/Header';
          import Footer from './shared/Footer';

          class Clientes extends Component {
            render() {
            return (
                < div>
                < Header>< /Header>
                < main className="col-lg-7 mb-5">
                  < h2 h2 className="display-5 mb-3 fw-semibold lh-sm">Lista de Clientes< /h2>
                  < ul>
                    < li>
                      < a href="/cliente/1"> Cliente 1 < /a>
                    < /li>
                    < li>
                      < a href="/cliente/2"> Cliente 2 < /a>
                    < /li>
                  < /ul>
                < /main>
                < Footer>< /Footer>
              < /div>
              )
            }
          }

          export default Clientes;

Criaremos 2 novas rotas: Uma página que reflete o retorno de página não encontrada e outra que reflete onde podemos enviar um id para ser renderizado por uma ação.

        
          import { BrowserRouter, Switch, Route } from 'react-router-dom'
          import Clientes from './views/Clientes';
          < BrowserRouter>
            < Switch> 
              < Route path="/" exact={true} component={App} />
              < Route path="/clientes" component={Clientes} />
              < Route path="/cliente/:id" component={ClienteMostrar} />
              < Route path="*" component={Pagina404} />
            < /Switch> 
          < /BrowserRouter>

Vamos criar o componente Pagina404 - Página não encontrada

        
          import React, { Component } from 'react';
          import Header from './shared/Header';
          import Footer from './shared/Footer';

          class Pagina404 extends Component {
            render() {
            return (
                < div>
                < Header>< /Header>
                < main className="col-lg-7 mb-5">
                  < h2 h2 className="display-5 mb-3 fw-semibold lh-sm">Ops.. Página não encontrada< /h2>
                < /main>
                < Footer>< /Footer>
              < /div>
              )
            }
          }

          export default Pagina404;

Vamos criar o componente ClienteMostrar

      
        import React, { Component } from 'react';
        import Header from './shared/Header';
        import Footer from './shared/Footer';

        class ClienteMostrar extends Component {
          render() {
          return (
              < div>
              < Header>< /Header>
              < main className="col-lg-7 mb-5">
                < h1 className="display-5 mb-3 fw-semibold lh-sm">Mostrando Cliente X< /h1>
                < /main>
              < Footer>< /Footer>
            < /div>
            )
          }
        }

        export default ClienteMostrar;

Vamos criar uma propriedade id que usaremos no nosso template para mostrar o código do cliente.

Abaixo do render, iremos utilizar o props para mostrar o id que usamos na url

      
        class ClienteMostrar extends Component {
          constructor(){
            super()
            this.id = 0
          }
          render() {
          this.id = this.props.match.params.id
          return (
              < div>
              < Header>< /Header>
              < main className="col-lg-7 mb-5">
                < h1 className="display-5 mb-3 fw-semibold lh-sm">Mostrando Cliente {this.id}< /h1>
                < /main>
              < Footer>< /Footer>
            < /div>
            )
          }
        }

        export default ClienteMostrar;

ReactJs Rotas + Api dotNet Core

Nesta aula estudaremos como criar as rotas de nossa aplicação em ReactJs

Próximas Aulas:

Assine nossa Comunidade