Question

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

问候，迈克尔

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

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

如果您需要以编程方式重定向到其他路由，请查看this SO question。

在加载的Nav上React Bootsrap Nav设置了活动的LinkContainer

1 个答案: