Steps步骤条结合路由跳转

Steps步骤条

定义一个home目录，
index.js
step.js
StepOne.js
StepTwo.js
StepThree.js

// index.js
import React, { Component } from 'react'
import Stepper from './step'
import { Route } from 'react-router-dom'
import StepOne from './StepOne'
import StepTwo from './StepTwo'
import StepThree from './StepThree'

export default class Home extends Component {
  render() {
    return (
      <div>
        <Stepper {...this.props}/>  //传递路由属性
        <Route path='/home/step1' component={StepOne} />
        <Route path='/home/step2' component={StepTwo} />
        <Route path='/home/step3'component={StepThree} />
      </div>
    )
  }
}

step.js引入antd steps组件

import React from 'react'
import { Steps } from 'antd';

const { Step } = Steps;
class Stepper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 0
    };
  }
  //点击跳转
  onChange = (current) => {
    const { push } = this.props.history
    switch (current) {
      case 0:
        push('/home/step1')
        break;
      case 1:
        push('/home/step2')
        break;
      default:
        push('/home/step3')
        break;
    }
    this.setState({ current })
  }

  componentDidMount() {
    this.checkStep()
  }
  UNSAFE_componentWillReceiveProps(nextProps){
    this.checkStep(nextProps)
  }
  //通过路由判断
  checkStep = (nextProps) => {
    const { pathname } = nextProps ? nextProps.location : this.props.location
    switch (pathname) {
      case '/home/step1':
        this.setState({ current: 0 })
        break;
      case '/home/step2':
        this.setState({ current: 1 })
        break;
      default:
        this.setState({ current: 2 })
        break;
    }
  }
  render() {
    const { current } = this.state
    return (
      <div>
        <Steps
          type="navigation"
          current={current}
          onChange={this.onChange}
        >
          <Step
            title="第一步"
          // status="finish"
          // description="This is a description."
          />
          <Step
            title="第二步"
          // status="process"
          // description="This is a description."
          />
          <Step
            title="第三步"
          // status="wait"
          // description="This is a description."
          />
        </Steps>
      </div>
    );
  }
}
export default Stepper

//StepOne.js
import React, { Component } from 'react'
import { Button } from 'antd'
export default class StepOne extends Component {
  nextHandler=()=>{
    const {push}=this.props.history
    push('/home/step2')
  }
  render() {
    return (
      <div>
        第一步
        <Button onClick = { this.nextHandler }> 下一步 </Button>
      </div>
    )
  }
}

//StepTwo.js
import React, { Component } from 'react'
import { Button } from 'antd'
export default class StepTwo extends Component {
  nextHandler=()=>{
    const {push}=this.props.history
    push('/home/step3')
  }
  render() {
    return (
      <div>
        第二步
        <Button onClick = { this.nextHandler }> 下一步 </Button>
      </div>
    )
  }
}

//StepThree.js
import React, { Component } from 'react'
export default class StepThree extends Component {
  render() {
    return (
      <div>
        第三步
      </div>
    )
  }
}