为什么反应路由器不适用于redux？答案

【问题标题】：Why react router does not work with redux?为什么反应路由器不适用于redux？
【发布时间】：2018-10-06 19:35:40
【问题描述】：

似乎反应路由器不适用于redux，单击App组件中的链接成功将'/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);

那么为什么单击链接不会导致导航到搜索页面，而只会在 URL 中添加“/search”。

【问题讨论】：

尝试使用github.com/reactjs/react-router-redux。这是 react-router 对 redux 的绑定
这可能对阅读 reacttraining.com/react-router/web/guides/redux-integration 有用也许你需要 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App))
@kunukn 这简直行得通！

标签： reactjs redux react-router

【解决方案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

【讨论】：