使用React Router Dom和Redux打开多个页面

npm install react-router-dom redux react-redux

import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers'; // 导入根Reducer

const store = createStore(rootReducer); // 创建Redux store

const App = () => {
  return (
    <Provider store={store}>
      <Router>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
        <Route path="/contact" component={ContactPage} />
      </Router>
    </Provider>
  );
};

import { connect } from 'react-redux';

const HomePage = ({ counter, increment }) => {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Counter: {counter}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

const mapStateToProps = (state) => ({
  counter: state.counter // 从Redux store获取counter状态
});

const mapDispatchToProps = (dispatch) => ({
  increment: () => dispatch({ type: 'INCREMENT' }) // 发送INCREMENT action
});

export default connect(mapStateToProps, mapDispatchToProps)(HomePage);