时间戳

首页 > 解决方案 > Reactjs 根据 url 更新组件的最佳实践

javascript - Reactjs 根据 url 更新组件的最佳实践

问题描述

我想知道 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：代码并不完美，因为我直接在消息框中快速输入了，抱歉。

标签： javascriptreactjsreact-reduxreact-router

解决方案

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

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

在您的主要组件中，您还可以使用Routefromreact-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>
     );
    }
   }
  }

同样，这只是个人喜好，而不是其他任何东西，但它肯定会清理一些东西

推荐阅读