Реакция-роутер-дом условного рендеринга

Question

Я хочу добавить больше кода, когда путь маршрутизации равен "/ flower"

Итак, мой код ниже.

[App.js]

class App extends Component {
  render() {
    return (
      <Router>
      <div className="App">
        <Header />
        <SideBar />
        <section>
          <Route exact path="/" component={Home} />
          <Route exact path="/flower" component={Flower} />
          <Route exact path="/editorial" component={Editorial} />
        </section>
        <Footer />
      </div>
      </Router>
    );
  }
}

[SideBar.js]

import React, { Component } from 'react';
import './index.css';
import { NavLink } from 'react-router-dom';

class index extends Component {
    render() {
        return (
            <aside>
                <NavLink exact to="/" className="item"><i className="fas fa-home"></i>HOME</NavLink>
                <NavLink to="/flower" className="item"><i className="fab fa-pagelines"></i>FLOWER</NavLink>
                <NavLink to="/editorial" className="item"><i className="fas fa-newspaper"></i>EDIT</NavLink>

            </aside>
        );
    }
}

SideBar всех страниц одинаков, за исключением /flower.

Когда пользователь вводит / flower, я хочу добавить больше кода к своему SideBar.

[Не / цветок]

[пользователь входит в / цветок]

Но я не знаю, как определить, что текущим путем является /flower.

Есть ли какое-либо решение или рекомендация?

Спасибо.

Answer 1

Но я не знаю, как мне определить, что текущий путь - /flower.

Но вы уже делаете это с Route:)

<Route exact path="/" component={Home} />
<Route exact path="/flower" component={Flower} />
<Route exact path="/editorial" component={Editorial} />

Вы условно визуализируете компоненты на основе текущего пути.Поэтому Home, Flower или Editorial будут отображаться , если текущий URL-путь соответствует path соответствию, которое вы передали Route.

Вы можете сделать то же самое вБоковая панель:

<aside>
   <NavLink exact to="/" className="item"><i className="fas fa-home"></i>HOME</NavLink>
   <NavLink to="/flower" className="item"><i className="fab fa-pagelines"></i>FLOWER</NavLink>
   <NavLink to="/editorial" className="item"><i className="fas fa-newspaper"></i>EDIT</NavLink>

   <Route 
     path="/flower" 
     render={() => (
       <div>
        <p>more stuff</p>
       </div>
     )} 
   />
</aside>

Я использовал рендер , но вы можете использовать component реквизит, как в других Route с.