javascript - React 和 Material UI - 如何删除基于路由的导航按钮/链接？

Question

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

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

我可以解析端点，并使用一堆丑陋的条件来完成此操作，这些条件根据解析的端点呈现不同的导航代码 - 但我认为有一种更简单的方法，我看不到做我想做的事情。 p>

谢谢。

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

Answer 1

您可以使用withRouter由react-router-4提供包。

以下是使用 withRouter 的示例

<小时/>

您可以访问history对象的属性和最接近的<Route>的比赛通过withRouter 高阶组件。 withRouter将通过更新match , location ，和history每当渲染时，向包装组件提供 Prop 。

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 后又名 route对象你可以做一个简单的if check确定应在特定 route 上显示哪些按钮。我将创建一个辅助函数来确定这一点，将其放在 componentDidMount 内生命周期或同等 useEffect钩子(Hook)(如果您选择该方法)`，将结果保存到状态，最后进行 if 检查，并根据其结果，显示/隐藏按钮

<小时/>

重要说明:
withRouter不订阅location更改如 React-Redux的 connect用于状态更改。相反，位置更改后重新渲染会从 <Router> 传播出去。成分。这意味着 withRouter 不会在路由转换时重新渲染，除非其父组件重新渲染。

<小时/>

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

// ....
<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>