React Router - боковая панель не работает на всех страницах

Question

У меня есть боковая панель для навигации на двух страницах: Dashboard и Study.

Боковая панель работает, как и ожидалось, на странице панели инструментов, направляя меня на нужную страницу. Однако на странице «Исследование» при нажатии на одну из ссылок URL-адрес изменяется, а представление - нет. Он просто остается на той же странице, как будто ничего не произошло. Когда я вручную обновляю, это работает.

Поскольку я использую Redux также для целей аутентификации и для получения идентификатора пользователя, вошедшего в систему, каждый компонент, которому требуется доступ к хранилищу, имеет экспорт withRouter (). Но это все еще не работает.

Вот соответствующий код: App.js

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <div className="App">

            <Route exact path="/" component={Landing} />

            <Route exact path="/login" component={Login} />
            <Route exact path="/signup" component={Register} />

            <Route path="/studies" component={SidebarDashboard} />
            <Route exact path="/studies" component={Dashboard} />
            <Route path="/studies/:id" component={Study} />

          </div>
        </Router>
      </Provider>
    );
  }
}
export default App;

Sidebar.js

class SidebarDashboard extends Component {
.
.
.

<Link to={'/studies/' + study.study._id}>
     <ListItem button>
           <ListItemText disableTypography inset primary={study.study.study_name} />
     </ListItem>
</Link>
.
.
.
const mapStateToProps = state => ({
    userID: state.auth.user.id
});

export default withRouter(connect(mapStateToProps)(SidebarDashboard));

Dashboard.js

class Dashboard extends React.Component {
.
.
.
render() {
        return (
            <div>
                <HeaderDashboard />
                <Overview studies={this.state.studies} />
                <StudyList studies={this.state.studies} />
            </div >
        )
    }
}

const mapStateToProps = state => ({
    userID: state.auth.user.id
});

export default withRouter(connect(mapStateToProps)(Dashboard));

Study.js

class Study extends React.Component {
.
.
.
const mapStateToProps = state => ({
    userID: state.auth.user.id
});

export default withRouter(connect(mapStateToProps)(Study));

Так что, в основном, я хочу знать, как это возможно, что в Dashboard ссылки работают правильно, а в Study - те же ссылки не работают. Я сбит с толку. Я имею в виду, что компонент SidebarDashboard остается одинаковым на обеих страницах.