在特定路线上有条件地渲染JSX

如何解决在特定路线上有条件地渲染JSX

我为SplitScreen页面构建了一个React Component Layout（屏幕截图的底部布局设计）。

问题是LoginPage布局（屏幕截图中的顶部布局设计）不需要顶部的backArrowIcon，因为您可以在第二个屏幕截图中更好地看到。

我还必须更改LoginPage容器屏幕上的Left Right split显示。

任何人都知道如何解决我的两个问题？

这也是我的SplitScreen组件代码：

import React from 'react';
import { Link,useHistory,withRouter } from 'react-router-dom';

import logoImg from '../../assets/images/logo.svg';
import backIcon from '../../assets/images/icons/back.svg';

import './styles.css';

function SplitScreen(props: { children: React.ReactNode; }) {
  return (
    <section className="split-page-container">
      <div className="right-side">
        <Link
          className="back-arrow"                 // Here's the backArrowIcon
          to="/">
          <img src={backIcon} alt="Voltar" />
        </Link>
        <div className="proffy">
          <div className="proffy-fundo">
            <img src={logoImg} alt="Proffy Logo" />
            <h2>Sua plataforma de <br /> estudos online.</h2>
          </div>
        </div>
      </div>

      <div className="left-side">
        <div className="content-box">
          {props.children}
        </div>
      </div>
    </section>
  );
}

export default SplitScreen;

这是我的CSS：

.split-page-container {
  width: 100vw;
  height: 100vh;

  display: flex;
  flex-flow: column nowrap;
}

.left-side,.right-side {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.left-side {
  background: var(--color-background);
}

.right-side {
  background: var(--color-primary);
}

.content-box {
  padding: 5.6rem 3.2rem;
}

.back-arrow {
  align-self: flex-start;
  padding: 1.2rem 1.8rem;
  height: 0;
  color: var(--color-text-in-primary);
}

.right-side a {
  transition: opacity 0.2s;
}

.right-side a:hover {
  opacity: 0.6;
}

.proffy {
  height: 37.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.proffy-fundo {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width: 23.8rem;
  height: 26.6rem;
  background-image: url('../../assets/images/success-background.svg');
  background-position: center;
  background-size: contain;
}

.proffy-fundo img {
  width: 16rem;
}

.proffy-fundo h2 {
  width: 16rem;
  
  text-align: left;
  font-weight: 500;
  font-size: 1.6rem;
  margin-top: 0.8rem;

  color: var(--color-text-in-primary);
}

@media (min-width: 1100px) {
  .split-page-container {
    flex-flow: row-reverse nowrap;       // How can I delete this .split-page-container styling on
  }                                      // my LoginPage container?

  .back-arrow {
    color: var(--color-primary-darker);
    transform: translate(-39vw,-23vh);
  }

  .right-side a {
    transition: opacity 0.2s;
  }
  
  .right-side a:hover {
    opacity: 0.8;
  }

  .proffy-fundo {
    width: 40rem;
    height: 58.4rem;
  }

  .proffy-fundo img {
    width: 33.4rem;
  }

  .proffy-fundo h2 {
    width: 33.4rem;

    text-align: left;
    font-weight: 500;
    font-size: 2.4rem;
    line-height: 3.4rem;
    margin-top: 0.8rem;
  }
}

解决方法

您可以使用位置路径名并检查是否在登录路径上。

useLocation

如果不在您的登录路径上，则有条件地显示“后退”按钮。

import React from 'react';
import { Link,useLocation,useHistory,withRouter } from 'react-router-dom';

import logoImg from '../../assets/images/logo.svg';
import backIcon from '../../assets/images/icons/back.svg';

import './styles.css';

function SplitScreen(props: { children: React.ReactNode; }) {
  const { pathname } = useLoction();

  const showBack = !pathname.startsWith("/login");

  return (
    <section className="split-page-container">
      <div className="right-side">
        {showBack && (
          <Link
            className="back-arrow"
            to="/">
            <img src={backIcon} alt="Voltar" />
          </Link>
        )}
        <div className="proffy">
          <div className="proffy-fundo">
            <img src={logoImg} alt="Proffy Logo" />
            <h2>Sua plataforma de <br /> estudos online.</h2>
          </div>
        </div>
      </div>

      <div className="left-side">
        <div className="content-box">
          {props.children}
        </div>
      </div>
    </section>
  );
}

如果只想交换左右两侧，则可以交换类名。

function SplitScreen(props: { children: React.ReactNode; }) {
  const { pathname } = useLoction();

  const showBack = !pathname.startsWith("/login");

  return (
    <section className="split-page-container">
      <div className="left-side"> // <-- now the left side
        {showBack && (
          <Link
            className="back-arrow"
            to="/">
            <img src={backIcon} alt="Voltar" />
          </Link>
        )}
        <div className="proffy">
          <div className="proffy-fundo">
            <img src={logoImg} alt="Proffy Logo" />
            <h2>Sua plataforma de <br /> estudos online.</h2>
          </div>
        </div>
      </div>

      <div className="right-side"> // <-- now the right side
        <div className="content-box">
          {props.children}
        </div>
      </div>
    </section>
  );
}