my links are not working in my react router app - reactjs

Question

My links in the following code are not working. I'm a beginner and I'm not sure on where the issue is.
Do you have any tips on how to debug that?
Thank you,
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import {fetchItems} from './actions/items';
import { connect } from 'react-redux';
import './App.css';
import Home from './components/Home.js'
import Additem from './components/Additem'
import Mybag from './components/Mybag.js'
import About from './components/About.js'
import ItemShow from './components/ItemShow.js'
import NavigationBar from './components/NavigationBar.js'
class App extends Component {
constructor(props){
super(props)
}
componentDidMount(){
this.props.fetchItems();
}
render() {
console.log("itemList: ", itemList)
const itemList = this.props.items
return (
<div className="App">
<NavigationBar />
<React.Fragment>
<Route exact path='/' render={routerProps => <Home {...routerProps} items={itemList}/>} />
<Route exact path={`/items/:itemID`} component={ItemShow} />
<Route exact path="/my_bag" component={Mybag} />
<Route exact path="/add_item" component={Additem} />
<Route exact path="/about" component={About} />
</React.Fragment>
</div>
)
}
}
const mapStateToProps = state => {
return {
items: state.items
}
}
const mapDispatchToProps = dispatch => {
return {
fetchItems: (items) => dispatch(fetchItems(items)),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
I used to have a component in charge of fetching my items in the DB and load them. It was working but refactored to include the fetch as a redux action and since then, it is not working anymore.
Please let me know if you have any tips.
Thank you!

Answer 1

Wrap your connected component with react-router's withRouter function:
// Adding the imports just for clarity.
import { connect } from "react-redux";
import { compose } from "redux";
import { withRouter } from "react-router-dom";
// compose-style
compose(
withRouter,
connect(...)
)(YourComponent);
// Without compose
withRouter(connect(...))(Your component);
For more information: withRouter API

Answer 2

sn42 is right. But I prefer to export the container with withRouter function rather than using compose
export default withRouter((connect(mapStateToProps, mapDispatchToProps)(App)));