React-react-router-dom repeating components

Question

React-react-router-dom repeating components

I am developing a login/signup page in React, however, I ran into 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 turns out that the moment the user logs in, I want it to be redirected to a new application screen, however, this screen should not repeat the Hint components. They could help me accomplish such a feat. Right now, 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>
    );
}

0

react-router-dom react

Author: Augusto Vasques, 2020-11-22

Source

1 answers

score 0 · Answer 1

You can use the render method to render your template, make an AuthRoute component like this, pass your layout around, and in the layout component where you want the routes, pass 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 only change the redirect logic, and your template!