react-router学习网站：https://reactrouter.com/web/example/custom-link
App.js
import React, { Component } from "react"; import StepOne from "./stepOne"; import StepTwo from "./stepTwo"; import StepThree from "./stepThree"; import { Menu } from "antd"; import { connect } from "react-redux"; import { Route, Link} from "react-router-dom"; import "antd/dist/antd.css"; class App extends Component { constructor(props){ super(props); this.state={ current: 'StepOne', } this.handleClick = this.handleClick.bind(this); } handleClick(e) { this.setState({ current: e.key, }); } render() { return ( <div style={{ paddingTop: 70 }}> <Menu onClick={this.handleClick} mode="horizontal" selectedKeys={[this.state.current]} > <Menu.Item key="StepOne"> <Link to="/">步骤一</Link> </Menu.Item> <Menu.Item key="StepTwo"> <Link to="/StepTwo">步骤二</Link> </Menu.Item> <Menu.Item key="StepThree"> <Link to="/StepThree">步骤三</Link> </Menu.Item> </Menu> <Route exact path="/"> <StepOne /> </Route> <Route path="/StepTwo"> <StepTwo /> </Route> <Route path="/StepThree"> <StepThree /> </Route> </div> ); } } const mapStateToProp = state => ({ }); const mapDispatchToProp = dispatch => ({ }); export default connect( mapStateToProp, mapDispatchToProp )(App);新建action文件，文件下新建js文件
import * as TYPES from "../types"; export function getStep(value) { return dispatch => { console.log('value', value) dispatch(changeStep(value)); }; } export function changeStep(stepList) { return { type: TYPES.STEP_LIST, text: stepList }; }新建reducers文件，文件下新建两个js
reducers.js
import stepReducer from "./stepReducer"; import {combineReducers} from 'redux'; export default combineReducers({ stepListStore: stepReducer });stepReducer.js
import * as TYPES from "../types"; const initialState = { stepList: "" }; export default function allList(state = initialState, action) { switch (action.type) { case TYPES.STEP_LIST: return { ...state, stepList: action.text }; default: return state; } }新建types文件，文件下新建js文件
export const STEP_LIST = "step_list";页面文件stepOne.js，另外两个页面省略代码
import React, { Component } from "react"; import { Button } from "antd"; import { connect } from "react-redux"; import { getStep } from "./action" // import { useHistory } from "react-router-dom"; // let history = useHistory(); class StepOne extends Component { constructor(props) { super(props); this.state = { stepList: "", } this.addStep = this.addStep.bind(this); } addStep(){ const { getStep } = this.props; getStep("getStep"); // history.pushState("/StepTwo") } render() { console.log("stepList",this.props.stepList) return ( <div style={{ paddingTop: 70 }}> Step One <Button onClick={this.addStep}>跳转到步骤二</Button> </div> ); } } const mapStateToProp = state => ({ stepList: state.stepListStore.stepList }); const mapDispatchToProp = dispatch => ({ getStep: (value) => dispatch(getStep(value)) }); export default connect( mapStateToProp, mapDispatchToProp )(StepOne);初始index文件的配置
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import { Provider } from "react-redux"; import { createStore, applyMiddleware } from "redux"; import { BrowserRouter as Router, } from "react-router-dom"; import thunkMiddleware from 'redux-thunk' import { createLogger } from 'redux-logger' import reducers from "./reducers/reducers"; const loggerMiddleware = createLogger() const store = createStore( reducers, applyMiddleware( thunkMiddleware, // 允许我们 dispatch() 函数 loggerMiddleware // 一个很便捷的 middleware，用来打印 action 日志 ) ) ReactDOM.render( <Provider store={store}> <Router> <div id="root-div"> <App /> </div> </Router> </Provider>, document.getElementById('root') ); serviceWorker.unregister();
