react-router-dom conditional rendering

Question

I want to add more code when routing path is "/flower"

So my code is below.

[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>
        );
    }
}

All page's SideBar is same except /flower.

When user entering /flower, I want to add more code to my SideBar .

[Not /flower]

[user entering to /flower]

But, I don't know how can I detect that current path is /flower.

Is there any solution or guideline?

Thanks.

Answer 1

But, I don't know how can I detect that current path is /flower.

But you already do this with Route :)

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

You conditionally render components based on a current Path. So Home , Flower or Editorial will be rendered if current URL Path matches path matcher you passed to Route .

You can do exactly the same in Sidebar:

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

I used render but you can use component prop like in other Route s.