 
   selectPeriod: (courseId) ->
     if courseId is @props.courseId
-      @onSelect(@state.active)
+      @onTabSelection(@state.active)
 
-  onSelect: (key) ->
-    {courseId, handleSelect} = @props
+  onTabSelection: (key) ->
     {sortedPeriods} = @state
+    @context.router.transitionTo(@context.router.getCurrentPathname(), {}, {tab: key})
+    @updateTabSelectionState(key)
 
-    period = sortedPeriods?[key]
+  updateTabSelectionState: (active) ->
+    return if @state.active is active
+
+    {courseId, handleSelect, handleKeyUpdate} = @props
+
+    period = @state.sortedPeriods[active]
     unless period?
       throw new Error("BUG: #{key} period does not exist for course #{courseId}. There are only #{periods.length}.")
       return
 
-    @setState(active: key)
-    handleSelect?(period, key)
+    @setState({active})
+    handleSelect?(period)
 
   renderPeriod: (period, key) ->
     className = classnames({'is-trouble': period.is_trouble})

    {afterTabsItem} = @props
    periodsItems = _.map(sortedPeriods, @renderPeriod)

    <BS.Nav bsStyle='tabs' activeKey={active} onSelect={@onSelect}>
      {periodsItems}
      {afterTabsItem?()}
    </BS.Nav>

    CourseStore.off('course.loaded', @selectPeriod)

  componentWillReceiveProps: (nextProps) ->
    {tab} = @context.router.getCurrentQuery()
    unless _.isUndefined(tab)
      tab = parseInt(tab, 10)
      @updateTabSelectionState(tab)
    @setSortedPeriods(nextProps.periods)

  setSortedPeriods: (periods) ->
