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

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

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

我可以解析端点，并使用一堆丑陋的条件语句来执行此操作，这些条件条件会基于解析的端点呈现不同的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;

导航组件。

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道具传递给包装的组件。

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>

关于javascript - React＆Material UI-如何根据路线删除导航按钮/链接？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58676324/