I am looking to add pages/components to the following control. Currently when you click forward and backwards you get the count displaying between the nav(igation) controls.
What I am trying to achieve is to create a nav which flicks between components/views. Im using react-bootstrap. I am having trouble with the routing because it also sits within a tabbed view so want to ideally keep the same route and not have to worry about changing this for each view, see screenshot.

[![Screenshot with what I want to achieve](https://i.stack.imgur.com/XOwJR.png)](https://i.stack.imgur.com/XOwJR.png)

The following code creates the navigation. I would need advice on the best way to add the views as you click forward and backward, similar to a carousel but using views rather than images. Thanks.

```js
import React from "react"
import styled, { css } from 'styled-components'
import './style.css'

const Button = styled.button`
      background: transparent;
      border-radius: 3px;
      border: 2px solid palevioletred;
      color: palevioletred;
      margin: 0.5em 1em;
      padding: 0.25em 1em;

      ${props => props.primary && css`
        background: palevioletred;
        color: white;
      `}
    `;

    const Container = styled.div`
      text-align: center;
    `
    class App extends React.Component {
        constructor() {
            super()
            this.state = {
                count: 0
            }
            this.handleForwardClick = this.handleForwardClick.bind(this);
            this.handleBackwardClick = this.handleBackwardClick.bind(this)
        }

        handleForwardClick() {
            this.setState(prevState => {
                return {
                    count: prevState.count + 1
                }
            })
        }

        handleBackwardClick() {
            this.setState(prevState => {
                return {
                    count: prevState.count - 1
                }
            })
        }

        render() {
            return (
                <Container className="flex-buttons">               
                    <Button onClick={this.handleForwardClick}>Forward</Button>
                    <h1>{this.state.count}</h1>
                    <Button primary onClick={this.handleBackwardClick}>Backward</Button>
                </Container>
            )
        }
    }
export default App

```