React＆Material UI-如何根据路线删除导航按钮/链接？

Posted 2023-01-14

下面的代码是React应用程序的主要app.js条目，它包括路由器端点。

app.js代码下方是Nav（导航）组件的代码。我想知道如何构造此代码，以便当用户转到特定路线时，导航中的相应链接将被删除。换句话说，如果用户位于localhost：3000 / calendar，则导航组件中不应出现带有单词“ calendar”的选项卡。

我可以解析端点，并使用一堆丑陋的条件语句来执行此操作，这些条件条件基于解析的端点呈现不同的Nav代码-但我认为有一种更简单的方法，使我看不到自己想要做的事情。

谢谢。

App.js

function App()

    ...code

    function redirectToClientsList()
        window.location.href = "/";
    


    function redirectToCalendar()
        window.location.href = "/calendar";
    




    return (
       <div className="App">
                <MuiPickersUtilsProvider utils=MomentUtils>

                    <Nav redirectToClientsList = redirectToClientsList redirectToCalendar=redirectToCalendar />

                    <BrowserRouter>
                        <div>
                            <Switch>
                                <Route exact=true path="/" component=Landing />
                                <Route exact=true path="/test" component=Test />
                                <Route exact=true path="/client/:id/client-name/:client/workflows" component=Workflows />
                                <Route exact=true path="/calendar" component=Calendar />
                                <Redirect from="/*" to="/" />
                            </Switch>
                        </div>
                    </BrowserRouter>
                </MuiPickersUtilsProvider>
        </div>
    );



export default App;

Nav组件。

function Navbar(props)

    const classes = props;

    return (


          <AppBar className=classes.bgColor >


            <Toolbar>

                  <Button color="inherit" onClick =props.redirectToClientsList>Clients</Button> 
                  <Button color="inherit" onClick =props.redirectToCalendar>Calendar</Button>
                  <Button className=classes.saveDataButton style=float:"right" color="inherit">SAVE</Button>


            </Toolbar>

          </AppBar>



    )


Navbar.propTypes = 
    classes: PropTypes.object.isRequired,
;

const styles = theme => (navbarStyle(theme));
export default withStyles(styles)(Navbar);

答案

您可以使用withRouter软件包提供的react-router-4。

这里是使用withRouter

的示例

---

您可以通过history 高阶组件访问<Route>对象的属性和最接近的withRouter匹配项。每当渲染时，withRouter都会将更新的match，location和history props传递给wrapped component。

import React,  Component  from "react";
import  withRouter  from "react-router";

// A simple component that shows the pathname of the current location

class ShowTheLocation extends Component 
  render() 
    const  match, location, history  = this.props;

    return <div>You are now at location.pathname</div>;
  


// Create a new component that is "connected" to the router  
const ShowTheLocationWithRouter = withRouter(ShowTheLocation);

在访问current location aka route对象之后，您可以执行简单的if check确定应该在该route上显示哪些按钮。我将创建一个应该确定该函数的助手函数，将其放入componentDidMount生命周期或等效的useEffect挂钩（如果选择该方法）`，将结果保存到状态，最后进行if检查并根据其结果，显示/隐藏按钮

---

重要注意事项：withRouter不订阅location更改，就像React-Redux的 connect订阅状态更改一样。而是在位置更改后从<Router>组件传播出去，然后重新渲染。这意味着withRouter不会在路径转换时重新呈现除非其父组件重新呈现。

---

您可以用withRouter HOC包装app.js组件，并在Nav.js组件中获取必要的道具

// ....
<div className="App">
            <MuiPickersUtilsProvider utils=MomentUtils>
                <BrowserRouter>
                    <div>
                      <Nav redirectToClientsList = redirectToClientsList redirectToCalendar=redirectToCalendar />
                        <Switch>
                            <Route exact path="/" component=Landing />
                            <Route exact path="/test" component=Test />
                            <Route exact path="/client/:id/client-name/:client/workflows" component=Workflows />
                            <Route exact path="/calendar" component=Calendar />
                            <Redirect from="/*" to="/" />
                        </Switch>
                    </div>
                </BrowserRouter>
            </MuiPickersUtilsProvider>
    </div>

// LET'S NOW WRAP OUR App.js COMPONENT WITH THE withRouter HOC - [don't forget to import it first] :)
export default withRouter(App);

---

Nav.js

function Navbar(props)

    const classes = props;

      // We're interested in the current path,
     // so, we'll destructure it from the location property    
    const  pathname  = props.location;

    return ( 
          <AppBar className=classes.bgColor >
            <Toolbar>

             // Here we're going to do our check
             pathname !== "calendar" ?
                  <Button color="inherit" onClick =props.redirectToCalendar>Calendar</Button> : null

                   <Button color="inherit" onClick =props.redirectToClientsList>Clients</Button> 

                  <Button className=classes.saveDataButton style=float:"right" color="inherit">SAVE</Button>

            </Toolbar>
          </AppBar>