React Router working only once when Link is clicked

I am new to laravel and reactjs at the same time though i am studying how to work with these two together. I am trying out the most basic things having a left pane which has the "Projects" and then will output the "Tasks" on the content pane.

I am trying to achieve is when any item is clicked it should asynchronously load the data in the content and execute an api with that class.

App.JS

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Header from './Header'
import Item from './Item'
import ItemTask from './ItemTask'

class App extends Component {
  render () {
    return (
      <BrowserRouter>
        <div>
          <Header />
            <div className='wrapper'>
              <Item />
              <Route path='/:id' component={ItemTask} />
            </div>
        </div>
      </BrowserRouter>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))

Item.JS

import axios from 'axios'
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import { Link } from 'react-router-dom'

class Item extends Component {
  constructor () {
    super()
    this.state = {
      items: []
    }
  }

  componentDidMount () {
    axios.get('/api/items').then(response => {
      this.setState({
        items: response.data
      })
    })
  }

  render () {
    const { items } = this.state
    return (
      <nav id="sidebar">
        <div className="sidebar-header">
          <a href="#"><h3><span className="glyphicon glyphicon-list"></span> Lists</h3></a>
        </div>
        <ul className='list-group list-group-flush'>
          {items.map(item => (
            <Link
              className='list-group-item list-group-item-action d-flex justify-content-between align-items-center'
              to={`/${item.id}`}
              key={item.id}
            >
              {item.description}
              <span className='badge badge-primary badge-pill'>
                {item.tasks_count}
              </span>
            </Link>
          ))}
          <li className='list-group-item list-group-item-action d-flex justify-content-between align-items-center'>
            <input type="text" className='form-control new-item' />
          </li>
        </ul>
        <Link className='btn btn-primary btn-sm mb-3' to='/create' hidden>
          Create new item
        </Link>
      </nav>
    )
  }
}

export default Item

ItemTask.JS

import axios from 'axios'
import React, { Component } from 'react'

class ItemTask extends Component {
    constructor(props) {
        super(props)
        this.state = {
            item: {},
            tasks: []
        }
    }

    componentDidMount() {
        const itemId = this.props.match.params.id
        console.log('mounted')
        axios.get('/api/items/' + itemId).then(response => {
            this.setState({
                item: response.data,
                tasks: response.data.tasks
            })
        })
    }

    render() {
        const item = this.state

        return (
            <div>
            {item.tasks.map(task => (
                <div className="row" key={task.id}>
                    <div className="col-md-12">
                        <div className="btn-group btn-group tasks" data-toggle="buttons">
                            <label className="btn checkbox active" onClick={() => this.checkboxChanged(event)}>
                              <input type="checkbox" name='email1' onChange={() => this.checkboxChanged(event)} checked /><i className="fa fa-square-o fa-2x"></i><i className="fa fa-check-square-o fa-2x"></i>
                              <span> {task.title}</span>
                            </label>
                        </div>
                    </div>
                    <div className="col-md-12">
                        <hr/>
                    </div>
                </div>
            ))}
            </div>
        )
    }
}

export default ItemTask

I've been trying these for two days already and no luck. I only checked on the basic how to the react and laravel then proceeded to development, so please dont be shocked that my question is a little bit annoying and dumb.

Thanks in advance!

Also, when i make the attribute "to" into "to={items/${item.id}}" it is repeating every time i click, will someone please explain why? I know this is really the basics one but i would really appreciate any explanation.

Thanks!

via Chebli Mohamed