React Bootstrap Nav 在 Nav Loaded 上设置活动 LinkContainer答案

【问题标题】：React Bootsrap Nav set active LinkContainer on Nav LoadedReact Bootstrap Nav 在 Nav Loaded 上设置活动 LinkContainer
【发布时间】：2018-11-20 08:06:21
【问题描述】：

我有一个组件，左侧是导航，右侧是不同的内容。加载组件“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>;

您好，迈克尔

【问题讨论】：

标签： reactjs react-router react-router-bootstrap

【解决方案1】：

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

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

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

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

【讨论】：