Блог

Цель:
Отображение меню навигации при выборе «Главная», но не «О программе».

Проблема:
Сегодня, если вы выберете навигационную ссылку «Домой» или «О программе», вы всегда увидите меню.

Можно ли выбрать «О программе» без отображения меню навигации?

Информация:
*Я новичок в Reactjs
*В списке навигации может быть много ссылок, например, 20 различных ссылок или меньше. Например, Индекс, О компании, Сервис, Свяжитесь с нами и
т.д. *Это упрощенная версия, когда у вас есть только две ссылки: Главная, О компании. На самом деле это может быть больше навигационной ссылки в меню.

Стакблитц:
https://stackblitz.com/edit/react-k19hye?

Спасибо!

 import React from 'react';
import './style.css';
import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Nav = () => (
  <div>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
    </ul>
  </div>
);

const HomePage = () => <h1>Home Page</h1>;
const AboutPage = () => <h1>About Page</h1>;

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
    };
  }

  render() {
    return (
      <Router>
        {/* Router component can have only 1 child. We'll use a simple
          div element for this example. */}
        <div>
          <Nav />
          <Route exact path="/" component={HomePage} />
          <Route path="/about" component={AboutPage} />
        </div>
      </Router>
    );
  }
}

render(<App />, document.getElementById('root'));
 

Простым способом сделать это было бы использовать a Switch и переместить AboutPage маршрут до Nav . Таким образом, вам не нужно добавлять Nav в каждый компонент, если у вас много страниц

 import React from 'react';
import './style.css';
import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

const Nav = () => (
  <div>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
    </ul>
  </div>
);

const HomePage = () => <h1>Home Page</h1>;
const AboutPage = () => <h1>About Page</h1>;

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
    };
  }

  render() {
    return (
      <Router>
        {/* Router component can have only 1 child. We'll use a simple
          div element for this example. */}
          <Switch>
            <Route path="/about" component={AboutPage} />
            <div>
              <Nav />
              <Route exact path="/" component={HomePage} />
            </div>
        </Switch>
      </Router>
    );
  }
}

render(<App />, document.getElementById('root'));