Why react router does not work with redux?

Question

It seems like react router does not work with redux, clicking the link in App component successfuly add '/search' to the URL but it does not navigate to the search page, the navigation only happens after i refresh the page not after clicking the link, so what is the problem here??

Here are my two components

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
import * as BooksAPI from './BooksAPI';
import registerServiceWorker from './registerServiceWorker';
import { createStore, applyMiddleware } from 'redux';
import { bookReducer } from './reducers/BookReducer';
import thunk from 'redux-thunk';
import {BrowserRouter as Router} from 'react-router-dom';

const middleware = [thunk];
const store = createStore(bookReducer, [], applyMiddleware(...middleware));

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <App />
    </Router>   
  </Provider>, 
  document.getElementById('root')
);
registerServiceWorker();

App.js

import React, { Component } from 'react';
import { connect} from 'react-redux'
import BookShelf from './components/BookShelf'
import AllShelves from './components/AllShelves'
import Header from './components/Header';
import SearchPage from './components/SearchPage';
import * as BooksAPI from './BooksAPI';
import { Route } from 'react-router-dom';
import { Link } from 'react-router-dom';
import './App.css';

class App extends Component {  

  componentWillMount() {
    this.props.fetchBooks();
  }

  render() {
    console.log(this.props.books)
    return (
      <div className="App">
        <Header />
        <Route exact path="/"  render={(props) => <AllShelves />} />         
        <Route  path="/search" render={(props) => <SearchPage />} />
        <div className="open-search">
          <Link to="/search" />
        </div>
      </div>
    );
  }
}


const mapStateToProps = (state) => {
    return {
      books: state
    }
}

const mapDispatchToProps = (dispatch) => {
  return {
    fetchBooks: () => {
       BooksAPI.getAll().then(books => dispatch({
         type: 'FETCH_BOOKS',
         books
       }))
    },

  }
}
export default connect(mapStateToProps, mapDispatchToProps)(App);

So why clicking link doesn't cause navigation to the search page and only add '/search' to the URL.

Answer 1

You might need to apply withRouter to make it work.

import {withRouter , BrowserRouter as Router} from 'react-router-dom';

// your code here

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));

---

I recommend to to read the official documentation on how to integrate React Router with Redux https://reacttraining.com/react-router/web/guides/redux-integration