Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

React: Evitar efeito de carregamento

Boa tarde, Estou fazendo um exercício simulando um cadastra de banco e etc, e para o usuário trocar de cadastro de banco para cadastro de forma de pagamento por exemplo, eu coloquei uma Sidebar no canto esquerdo e fiz as rotas usando o React Router.

Porem buscando informações no site do React Router para fazer o exercício reparei que a tela não era recarregada quando eu selecionava outra opção de conteúdo na Sidebar. a Sidebar deles fica no mesmo lugar e apenas o conteúdo diferente de cada pagina muda, ou seja o conteúdo do canto direito.

Qual o nome dado para esse "efeito" ou para a forma que foi desenvolvido para reagir assim.

Fiquei muito interessado porem não consegui achar nada a respeito.

Segue o link para exemplo: https://reacttraining.com/react-router/core/guides/quick-start

Sera que pode ser a maneira que construí o Router ?

Meu código ficou assim:

// Main

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Menu from './Menu';
import Banco from './Banco';
import Pagamento from './Pagamento';

const Main = () => {
   return <main>
      <Switch>
        <Route exact path={'/Menu'} component={Menu}/>
        <Route exact path={'/Banco'} component={Banco}/>
        <Route exact path={'/Pagamento'} component={Pagamento}/>
      </Switch>
    </main>
};

export default Main;

//SideNav

    routerHome = (event) =>{
        event.preventDefault(event)
        window.location.href = '/Menu'
    }


                <SideNav logo={logo} fixed isOpenWithButton={isOpenWithButtonA} breakWidth={991} className={this.props.color}>
                    <SideNavNav>
                        <SideNavItem onClick={this.routerHome}><Fa icon="home"></Fa>Home</SideNavItem>
                        <SideNavCat name="Cadastros" onClick={this.onClick} isOpen={this.state.accordionSideNav === 0} icon="copy">
                            <SideNavItem onClick={this.routerBanco}>Banco</SideNavItem>
                            <SideNavItem href={Front + '/financeiroPagamento'}>Forma de Pagamento</SideNavItem>
                        </SideNavCat>
                    </SideNavNav>
                </SideNav>
3 respostas

Tu deve usar o componente Link para fazer os links na sua aplicação.

import { Link } from 'react-router-dom';

 <Link to="/home"><Fa icon="home"></Fa>Home</Link>
solução!

Muito Obrigado Leonardo '-'

Como que troca a resposta que está como solução ?