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>