React - React-router-dom repeating components

Question

I am developing a login/registration page in React, however, I came across the following problem:

<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>

The Hint component (yellow screen) should appear during all transitions of the login/registration screen, repeating only the form components that are on the right side. It happens that the moment the user logs in, I want to be redirected to a new screen of the application, however, this screen should not repeat the Hint component. You could help me to accomplish this. I thank you!

Hint code:

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>
    );
}

Answer 1

You can use the render method to render your "template", make an Authroute component this way, passing its layout around, and in the layout component where you want the routes, passes as 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>
  );
}

now for authenticated route, you just change the logic of redirect, and your template!