Reactjs лучший способ обновления компонента в зависимости от url

Question

Мне было интересно, как лучше всего в ReactJS обновлять содержимое компонента в зависимости от URL-адреса. Допустим, у меня есть панель навигации с некоторыми кнопками. Я хочу отображать некоторые кнопки в зависимости от URL-адреса.

Например, когда URL-адрес /home Я хочу, чтобы моя панель навигации была:

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

И когда это /about Я хочу

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

Мой основной компонент будет примерно таким:

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

Итак, моя панель навигации находится в компоненте <Header/>. Мое первое предположение - использовать react-router, чтобы получить текущий URL-адрес, а затем изменить то, что отображается в <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>
    )
}

. Это хорошая практика? Есть ли способ лучше? Следует ли использовать react-redux для условного рендеринга? (Я новичок в react-redux и пытаюсь увидеть все возможности)

PS: код не идеален, потому что я быстро набрал его прямо в окне сообщения, извините за это.

Answer 1

вы можете использовать тернарный оператор, хотя нет ничего плохого в реализации, которая у вас есть прямо сейчас

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

, и в вашем основном компоненте вы также можете использовать 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>
     );
    }
   }
  }

Опять же, это просто личное предпочтение, а не что-то еще, но это, безусловно, немного поправляет