Reactjs最佳实践,用于根据URL更新组件

问题描述 投票:0回答:1

我想知道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获取当前网址,然后更改<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的新手,正在尝试查看所有可能性)

P.S .:代码并不完美,因为我很快在消息框中直接键入了代码,对此表示遗憾。

javascript reactjs react-redux react-router
1个回答
0
投票

您可以使用三元运算符,尽管您现在的实现没有问题

    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中的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>
     );
    }
   }
  }

再次,这只是个人喜好,而不是其他任何事情,但肯定可以使事情简单一些

© www.soinside.com 2019 - 2024. All rights reserved.