React Router v4 是一个流行的路由库，用于在 React 应用中实现页面导航和路由功能。然而，与 Redux 的集成一直是一个问题。在本文中，我们将探讨为什么 React Router v4 不直接支持 Redux，并提供一个案例代码来演示如何在 React 应用中同时使用 React Router v4 和 Redux。

npm install react-router-dom redux react-redux

js
import { createStore } from 'redux';
// reducer
function reducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}
// create store
const store = createStore(reducer);

js
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { connect, Provider } from 'react-redux';
// Counter component
function Counter({ count, increment, decrement }) {
  return (
    
      
Counter: {count}
      Increment
      Decrement
    
  );
}
// map state to props
function mapStateToProps(state) {
  return {
    count: state.count
  };
}
// map dispatch to props
function mapDispatchToProps(dispatch) {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' })
  };
}
// connect Counter component to Redux store
const ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);
// App component
function App() {
  return (
    
      
        
React Router v4 + Redux Example
        
          
            Home
          
          
            Counter
          
        
        
         
Welcome to the Home page!
} />
        
      
    
  );
}
// wrap App component with Redux provider
function Root() {
  return (
    
      
    
  );
}
export default Root;