React-router4显示组件中的名称

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 LABEL = { 
dashboard : 'Dashboard',
home: 'Home'
}

在渲染中：

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

我希望这会有所帮助，如果对没有帮助，可以问任何问题