Почему реагирует роутер не работает с приставкой?

Question

Похоже, что реагирующий маршрутизатор не работает с избыточностью, щелкнув ссылку в компоненте приложения, успешно добавьте «/ search» к URL-адресу, но не перейдите на страницу поиска, навигация происходит только после того, как я обновлю страницу, а не послещелкнув по ссылке, в чем здесь проблема?

Вот мои два компонента

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);

Так почему нажатие на ссылку не приводит к переходу на страницу поиска и добавляет только «/ search» к URL.

Answer 1

Вам может понадобиться применить withRouter, чтобы он заработал.

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

// your code here

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

---

Я рекомендую прочитать официальную документацию по интеграции React Router с Redux https://reacttraining.com/react-router/web/guides/redux-integration