Reactjs best practice for updating component depending on url

Question

I was wondering what is the best practice in ReactJS to update a component's content depending on the url. Let say I have a navbar with some buttons in it. I want to display some of the buttons depending on the url.

For exemple, when the url is /home I want my navbar to be:

<nav>
     <button>Button 1</button>
     <button>Button 2</button>
     <button>Button 3</button>
</nav>

And when it's /about I want

<nav>
     <button>Button 2</button>
</nav>

My main component would be something like:

<Router>
    <Header />
    <Switch>
        <Route path="/home">
            <Home />
        </Route>
        <Route path="/about">
            <About />
        </Route>
     </Switch>
</Router>

So my navbar is in the <Header/> component. My first guess would be to use react-router to get the current url and then change what is rendered in the <Header/>

render() {
    let buttons
    if(location === "/home") {
        buttons = <button>Button 1</button><button>Button 2</button><button>Button 3</button>
    } else {
        buttons = <button>Button 2</button>
    }
    return (
       <nav>
           {buttons}
       </nav>
    )
}

Is it a good practice? Is there a better way? Should I use react-redux for the conditionnal rendering? (I'm new to react-redux and I'm trying to see all the possibilities)

P.S.: the code is not perfect because I typed it quickly direct in the message box sorry for that.

I wonder why you even consider the latter when using react router is the better way. — jstarnate
– jstarnate, Commented May 29, 2020 at 20:59
I am using react-router. I don't understand what you mean by that. React-router has nothing to do with the way I conditionnaly render my component does it? — Nicolas Ould Bouamama
– Nicolas Ould Bouamama, Commented May 30, 2020 at 2:16
Apologies for misunderstanding your question. I think there's no better way than using Route in conditional rendering. — jstarnate
– jstarnate, Commented May 30, 2020 at 16:19

Abdullah Abid · Accepted Answer · 2020-05-29 23:44:14Z

1

you could use a ternary-operator, although there is nothing wrong with the implementation you have right now

    import React,{Fragment,Component} from 'react';
    import { useLocation} from "react-router-dom"; 

    class Header extends Component{
     let location = useLocation();
       render() {
        return (
           <nav>
              {
            location.pathname==='/home'? 
             (<Fragment>
              <button>Button 1</button>
              <button>Button 2</button>
              <button>Button 3</button>
             </Fragment>): (<Fragment>
              <button>Button 2</button>
             </Fragment>)    
            }
           </nav>
        )
    }
  }
}

and in your main component you could also use Route from react-router-dom

 import React,{Component} from 'react';
 import {BrowserRouter as Router,Route,Switch} from "react-router-dom";
 import Home from './Home';
 import About from './About';

  class App extends Component{
  render(){
   return(
      <Router>
       <Header />
       <Switch>
         <Route to="/home" component={Home}/>
         <Route to="/about" component={About}/>
       </Switch>
      </Router>
     );
    }
   }
  }

Again, this is just a personal preference rather than anything else,but it certainly cleans things up a little

edited May 29, 2020 at 23:44

answered May 29, 2020 at 23:04

Abdullah Abid

1,6613 gold badges12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nicolas Ould Bouamama Over a year ago

Thanks for the answer. I agree with what you said. I was just wondering if a better way existed. Thank you

Collectives™ on Stack Overflow

Reactjs best practice for updating component depending on url

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related