Реагировать JS - Как я могу показать / скрыть некоторые части компонента на основе пути URL? - PullRequest
Новая
       3

Реагировать JS - Как я могу показать / скрыть некоторые части компонента на основе пути URL?

1 голос
/ 22 января 2020

Мне было интересно, могу ли я изменить элементы панели навигации на основе URL , не имея 2 разных компонентов панели навигации. Моя навигационная панель имеет 3 ссылки слева и 3 ссылки справа, но я хочу отображать каждую сторону по одному разу.

например: когда я на /page-1, /page-2, /page-3 я хочу показать только левую сторону, а когда я на /page-4, /page-5, /page-6, чтобы показать правую сторону. Я пробовал что-то с match.params, но не повезло. Как я могу этого достичь? Извините за мой английский sh

Макет. 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>
  )
}

Ответы [ 2 ]

1 голос
/ 22 января 2020

Назначение компонента <Route />: для визуализации частей страницы, условно основанных на маршруте

Начиная с версии 3, React router рекомендует использовать <Route /> как обычный компонент вместо декларативного шаблона маршрута. Для получения более подробной информации посмотрите здесь: https://reacttraining.com/react-router/web/guides/philosophy

Таким образом, на основе выше, вы можете сделать так:

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

И в ваших левых и правых компонентах:

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

Для получения дополнительной информации об использовании нескольких путей для компонента <Route /> посмотрите здесь: Несколько имен путей для одного и того же компонента в React маршрутизатор

1 голос
/ 22 января 2020

Вы можете условно сделать левый или правый div следующим образом: 

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