React JS - Comment afficher/masquer certaines parties d'un composant en fonction du chemin URL ?

Question

Je me demandais si je pouvais changer les éléments de la barre de navigation sur la base de l'URL sans avoir 2 composants de barre de navigation différents. Ma barre de navigation comporte 3 liens sur le côté gauche et 3 liens sur le côté droit, mais je veux afficher chaque côté une fois.

ex : quand je suis sur /page-1, /page-2, /page-3 Je veux montrer seulement le côté gauche et quand je suis sur /page-4, /page-5, /page-6 pour montrer le côté droit. J'ai essayé quelque chose avec match.params mais pas de chance. Comment puis-je y parvenir ? Désolé pour mon anglais

Layout.js

...

export default class Layout extends Component {
  render() {
    return (
      <div>
        <Route path="/:name" component={Navbar} />
        <SomeContentComponent />
      </div>
    );
  }
}

Navbar.js

const Navbar = ({ match }) => {

  const page = match.params.name

  return (
    <div>
      <ul className="left">
        <li><Link to="/page-1">Page 1</Link></li>
        <li><Link to="/page-2">Page 2</Link></li>
        <li><Link to="/page-3">Page 3</Link></li>
      </ul>
      <ul className="right">
        <li><Link to="/page-4">Page 4</Link></li>
        <li><Link to="/page-5">Page 5</Link></li>
        <li><Link to="/page-6">Page 6</Link></li>
      </ul>
    </div>
  )
}

Answer 1

Vous pouvez conditionnellement rendre la div gauche ou droite comme ceci

const Navbar = ({ match }) => {

  const { url } = match;
  const showLeft = ['/page-1', '/page-2', '/page-3'].indexOf(url) > -1;

  return (
    <div>
      {showLeft && (<ul className="left">
        <li><Link to="/page-1">Page 1</Link></li>
        <li><Link to="/page-2">Page 2</Link></li>
        <li><Link to="/page-3">Page 3</Link></li>
      </ul>
      )}
      (!showLeft && (
      <ul className="right">
        <li><Link to="/page-4">Page 4</Link></li>
        <li><Link to="/page-5">Page 5</Link></li>
        <li><Link to="/page-6">Page 6</Link></li>
      </ul>
      )}
    </div>
  )
}

Answer 2

L'objectif de la <Route /> est le composant : pour rendre les parties d'une page, en fonction de l'itinéraire.

React router, à partir de la v3, encourage l'utilisation de <Route /> comme un composant normal au lieu du modèle de route déclaratif. Pour plus de détails, voir ici : https://reacttraining.com/react-router/web/guides/philosophy

Donc, sur la base de ce qui précède, vous pouvez faire comme ceci :

Navbar.js

import LeftNav from "./LeftNav.js";
import RightNav from "./RightNav.js";

const Navbar = () => (
  <>
    <Route path={['/page-1', '/page-2', '/page-3']} component={LeftNav} />
    <Route path={['/page-4', '/page-5', '/page-6']} component={RightNav} />
  </>
)

Et dans vos composants gauche et droit :

LeftNav.js :

export default () => (
  <ul className="left">
    <li><Link to="/page-1">Page 1</Link></li>
    <li><Link to="/page-2">Page 2</Link></li>
    <li><Link to="/page-3">Page 3</Link></li>
  </ul>
)

RightNav.js :

export default () => (
  <ul className="right">
    <li><Link to="/page-4">Page 4</Link></li>
    <li><Link to="/page-5">Page 5</Link></li>
    <li><Link to="/page-6">Page 6</Link></li>
  </ul>
)

Pour plus de détails sur l'utilisation de chemins d'accès multiples pour les services de la <Route /> composant, jetez un coup d'œil ici : Plusieurs noms de chemin pour un même composant dans React Router