Question

我使用react-router4并尝试在注释位置显示相应标签的名称。我不知道如何解决这个问题。 react-router4是否提供解决此问题的方法？谁能告诉我该怎么做？

Navigation.js：

        ...                        
<NavigationButton to="/" label="Dashboard" exact>
                                <MenuItem className={classes.menuItem}
                                          selected={this.state.selected === "Dashboard"}
                                          onClick={() => {this.setState({selected: "Dashboard"})}}>
                                    <ListItemIcon className={classes.icon}>
                                        <Home/>
                                    </ListItemIcon>
                                    <ListItemText classes={{primary: classes.primary}} inset primary="Dashboard"/>
                                </MenuItem>
                            </NavigationButton>
            <NavigationButton to="/payment" label="Payment" exact>
                        <MenuItem className={classes.menuItem}
                                  selected={this.state.selected === "Payment"}
                                  onClick={() => {this.setState({selected: "Payment"})}}>
                            <ListItemIcon className={classes.icon}>
                                <Payment/>
                            </ListItemIcon>
                            <ListItemText classes={{primary: classes.primary}} inset primary="Moje płatności"/>
                        </MenuItem>
                    </NavigationButton>

    ...

标题：

...
            <div className={classes.root}>
                <div className={classes.appFrame}>
                    <AppBar
                        className={classNames(classes.appBar, {
                            [classes.appBarShift]: open,
                            [classes[`appBarShift-left`]]: open,
                        })}
                    >
                        <Toolbar disableGutters={!open} className={classes.toolBar}>
                            <IconButton
                                color="inherit"
                                aria-label="Open drawer"
                                onClick={this.handleDrawerToggle}
                                className={classNames(classes.menuButton, open)}
                            >
                                <MenuIcon />
                            </IconButton>
                            <Typography variant="h6" color="inherit" noWrap>
  {/* print "Dashboard" when I choose Dashboard, or print "Payment" when I choose payment in Navigation.js. */}
                            </Typography>
                        </Toolbar>
                    </AppBar>
                    {before}
                    <main
                        className={classNames(classes.content, classes[`content-left`], {
                            [classes.contentShift]: open,
                            [classes[`contentShift-left`]]: open,
                        })}
                    >
                        <div className={classes.drawerHeader} />
                        <Switch>
                            <Route exact path="/" component={DashboardComponent} />
                            <Route exact path="/payment" component={PaymentComponent} />
                            <Redirect to="/" />
                        </Switch>

                    </main>
                </div>
            </div>
...

我使用react-router4并尝试在注释位置显示相应标签的名称。我不知道如何解决这个问题。 react-router4是否提供解决此问题的方法？谁能告诉我该怎么做？

Answer 1

这种方法不适合使用react-router显示当前组件名称的标签，因为当默认导出而没有名称时，这将是一个问题。因此，最好保持const LABEL = { ... } // all label with pathname as keys

因此，您可以将this.props.location.pathname与LABEL const对象匹配以正确显示它。

const LABEL = { 
               dashboard : 'Dashboard',
               home: 'Home'
              }

在您渲染中：

<Typography variant="h6" color="inherit" noWrap>
   {LABEL[this.props.location.pathname]}
</Typography>

我希望这会有所帮助，如果没有帮助，请提出任何问题

React-Router4在组件中显示名称

1 个答案: