React JS - How can I show / hide some parts of component based on URL path?

Question

I was wondering if I can change the navbar items based on URL without having 2 different navbar components. My navbar has 3 links on the left side and 3 links on the right but I want to display each side once a time.

eg: when I'm on /page-1, /page-2, /page-3 I want to show only the left side and when I'm on /page-4, /page-5, /page-6 to show the right side. I tried something with match.params but no luck. How can I achieve that? Sorry for my english

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

score 2 · Accepted Answer · answered Jan 22 '20 at 19:10

You can conditionally render left or right div like this

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

evolon · Answer 2 · 2020-01-22T19:32:07.940

The purpose of the <Route /> component is: to render the portions of a page, conditionally based on the route

React router, from v3 on, encourages to use <Route /> like a normal component instead of the declarative route pattern. For more details take a look at here: https://reacttraining.com/react-router/web/guides/philosophy

So based on above, you can do like this:

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

And in your left and right components:

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

For more details about the usage of multiple paths for <Route /> component, take a look at here: Multiple path names for a same component in React Router

React JS - How can I show / hide some parts of component based on URL path?

2 Answers2