0

Estou desenvolvendo uma página de login/cadastro em React, porém, deparei com o seguinte problema:

<div className="auth-container">
    <BrowserRouter>
        <Hint />
            <Switch>
                <Route exact path="/" component={LoginAside}/>
                <Route path="/register" component={RegisterAside}/>
                <Route path="/create-password" component={CreatePassword}/>
            </Switch>
    </BrowserRouter>
</div>

inserir a descrição da imagem aqui

O componente Hint (tela amarela) deverá aparecer durante todas as transições da tela de login/cadastro, repetindo apenas os componentes de formulário quem ficam do lado direito. Acontece que no momento que o usuário fazer o login, quero que seja redirecionado para uma nova tela da aplicação, porém, essa tela não deve repetir o componente Hint. Poderiam me ajudar a realizar tal feito. Desde já, agradeço!

Código do Hint:

import React from 'react';
import Slider from "react-slick";

import flatAvaliation from '../../assets/images/flat-avaliation.svg';
import flatSecurity from '../../assets/images/flat-security.svg';
import flatAnonymous from '../../assets/images/flat-anonymous.svg';

import '../../../node_modules/slick-carousel/slick/slick.css';
import '../../../node_modules/slick-carousel/slick/slick-theme.css';

import './styles.css'

export default function Hint() {

    const settings = {
        autoplay: true,
        autoplaySpeed: 10000,
        dots: true,
        infinite: true,
        speed: 1000,
        slidesToShow: 1,
        slidesToScroll: 1
    };

    return(
        <div className="hints-container">
            <Slider style={{width: '80%'}} {...settings}>
                <div className="hint-item">
                    <img
                        className="hint-img"
                        src={flatAvaliation}
                    />
                    <h1 className="hint-title">Seu site de avaliação!</h1>
                    <p className="hint-description">
                        Laboris duis est aliqua id est do consectetur et do cillum Lorem commodo. Occaecat laboris consectetur commodo enim irure culpa veniam cillum ut cupidatat in ipsum eiusmod. In mollit veniam excepteur sunt aute in. Amet eu amet reprehenderit est officia ipsum sunt amet aliquip occaecat sunt. Velit nulla non officia velit fugiat do qui exercitation enim.
                    </p>
                </div>
                <div className="hint-item">
                    <img
                        className="hint-img"
                        src={flatSecurity}
                    />
                    <h1 className="hint-title">Segurança</h1>
                    <p className="hint-description">
                        Laboris duis est aliqua id est do consectetur et do cillum Lorem commodo. Occaecat laboris consectetur commodo enim irure culpa veniam cillum ut cupidatat in ipsum eiusmod. In mollit veniam excepteur sunt aute in. Amet eu amet reprehenderit est officia ipsum sunt amet aliquip occaecat sunt. Velit nulla non officia velit fugiat do qui exercitation enim.
                    </p>
                </div>
                <div className="hint-item">
                    <img
                        className="hint-img"
                        src={flatAnonymous}
                    />
                    <h1 className="hint-title">Anonimato</h1>
                    <p className="hint-description">
                        Laboris duis est aliqua id est do consectetur et do cillum Lorem commodo. Occaecat laboris consectetur commodo enim irure culpa veniam cillum ut cupidatat in ipsum eiusmod. In mollit veniam excepteur sunt aute in. Amet eu amet reprehenderit est officia ipsum sunt amet aliquip occaecat sunt. Velit nulla non officia velit fugiat do qui exercitation enim.
                    </p>
                </div>
            </Slider>
        </div>
    );
}
8
  • Tentou colocar o componente amarelo só na tela de login e registros ? Commented 22/11/2020 às 17:46
  • Mas assim não ficaria redundante? Commented 22/11/2020 às 17:52
  • Você pode pensar o seguinte, o componente ele serve para ser reutilizado, exemplo, tenho um código que cria uma modal que repete várias vezes na minha aplicação, então eu crio um componente com o código da modal e uso o meu componente modal em todos os lugares da minha aplicação, seria mais ou menos isso que você está fazendo, criou um componente amarelo e chamou ele aonde foi necessário. Commented 22/11/2020 às 17:59
  • Agora ficou mais claro. Só mais uma dúvida. Caso eu esteja na página de login e resolva ir pra a página de cadastro, o componente amarelo irá renderizar novamente ou apenas o formulário de cadastro? Basicamente eu quero saber se o navegador irá fazer uma nova requisição pelo componente amarelo. Commented 22/11/2020 às 18:06
  • Consegue postar o código do componente amarelo ? Commented 22/11/2020 às 18:18

2 Respostas 2

0

Você pode usar o método render do pra renderizar seu "template", faça um componente AuthRoute desse jeito, passando seu layout por volta, e no componente layout aonde vc quer as rotas, passa como children:

#AuthRoute.js

import SomeLayout from '../SomeLayout'

export default function AuthRoute({
  component: Component,
  ...rest
}) {
  const signed = true; //aqui vc pega o estado de autenticacao

  if (signed) {
    return <Redirect to="/" />;
  } // redireciona o usuario pra tela inicial se ele estiver logado e tentar bater na rota de autenticacao

  return (
    <Route
      {...rest}
      render={props => (
        <SomeLayout>
          <Component {...props} />
        </SomeLayout>
      )}
    />
  );
}
#AuthLayout.js

const AuthLayout = ({children}) => {
  return (
    <div>
      {/* codigo do hint */}
    </div>
    <div>
      {children} // aqui o componente renderiza
    </div>
  );
}

agora pra rota autenticada, vc só troca a lógica do redirect, e seu template!

0

Você pode fazer de duas formas:

  1. Criar uma condicional onde ele vai renderizar o Hint apenas se não estiver autenticado, da seguinte forma:

    !authenticate && <Hint />
    

    caso vc não entenda a condicional acima, ela seria a mesma coisa que:

    if (authenticate === false) {
      return <Hint />
    }
    

    Aqui ele está dizendo o seguinte, se não estiver autenticado (!autehnticate) renderize o componente , caso contrário, ou seja, se estiver autenticado, não renderize nada, para isso vc terá que criar um state ou outra forma de armazenar o authenticate

  2. A segunda forma seria renderizar o Hint dentro das páginas de login/cadastro, e não no BrowserRouter, pois acredito que seu BrowserRouter esteja como elemento "pai" de todos os outros, então o Hint sempre vai aparecer mesmo.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .