时间戳

首页 > 解决方案 > React Bootsrap Nav 在 Nav Loaded 上设置活动 LinkContainer

reactjs - React Bootsrap Nav 在 Nav Loaded 上设置活动 LinkContainer

问题描述

我有一个组件，左侧有一个导航，右侧有不同的内容。加载组件“MyBookingsOverview”时，我想将第一个 NavItem 设置为活动并重定向到此路线。我还没有找到方法。有人有小费吗？这是我的代码：

export default class MyActivities extends Component {  
    render() {
        return (
            <Grid fluid>
                <Col lg={2}>
                    <Nav />
                </Col>
                <Col lg={10}>
                    <Routes />
                </Col>
            </Grid>                 
        );
    }
}

export default class MyActivityNav extends Component {  
    render() {
        return (
            <div className="itemRequestNav">
                <Nav bsStyle="pills" stacked>
                    <LinkContainer to={routes.ACCOUNT_ACTIVITIES_OVERVIEW}>
                        <NavItem>Übersicht</NavItem>
                    </LinkContainer>
                    <LinkContainer to={routes.ACCOUNT_ACTIVITIES_REQUESTS}>
                        <NavItem>Anfragen</NavItem>
                    </LinkContainer >
                    <LinkContainer to={routes.ACCOUNT_ACTIVITIES_BOOKINGS}>
                        <NavItem>Buchungen</NavItem>
                    </LinkContainer >
                </Nav>
            </div>                            
        );
    }
}
export default ({ childProps }) =>
    <Switch>
        <PrivateRoute exact path={routes.ACCOUNT_ACTIVITIES_OVERVIEW} component={MyRequests} />
        <PrivateRoute exact path={routes.ACCOUNT_ACTIVITIES_BOOKINGS} component={MyRequests} />
        <PrivateRoute exact path={routes.ACCOUNT_ACTIVITIES_REQUESTS} component={MyRequests} />  
    </Switch>;

问候，迈克尔

标签： reactjsreact-routerreact-router-bootstrap

解决方案

如果您想对 Nav 中的链接进行条件样式设置，则必须使用 react-router 中的NavLink组件并activeClassName使用您的 css 类设置道具。

<Nav bsStyle="pills" stacked>
  <NavLink to={routes.ACCOUNT_ACTIVITIES_OVERVIEW}
    activeClassName="selected">
    <NavItem>Übersicht</NavItem>
  </NavLink>
  <NavLink to={routes.ACCOUNT_ACTIVITIES_REQUESTS}
    activeClassName="selected">
    <NavItem>Anfragen</NavItem>
  </NavLink>
  <NavLink to={routes.ACCOUNT_ACTIVITIES_BOOKINGS}
    activeClassName="selected">
    <NavItem>Buchungen</NavItem>
  </NavLink>
</Nav>

一旦您被重定向到与您的路线匹配的正确组件，它将被自动选择并且您的样式将应用于该 NavLink。

如果您需要以编程方式重定向到另一条路线，请查看此 SO question。

推荐阅读