reactjs - 如何在多个页面中使用 React Joyride

Question

有没有办法在多个页面中创建一个react-joyride之旅。所以我的 index.js 文件如下所示？我在索引页面中添加了 react-joyride，因为所有组件都通过 index.js 文件运行。

class IndexApp extends Component {
  constructor(props) {
    super(props);

    this.state = {
      view: false,
      run: true,
      steps: [
      {
        target: '.cc',
        content: 'This is my awesome feature!',
      },
    ],
    stepIndex: 0
    };
  }

  handleJoyrideCallback = data => {
    const { action, index, status, type } = data;
console.log("ghgg")
    if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type)) {
      // Update state to advance the tour
      this.setState({ stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) });
    }
    else if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
      // Need to set our running state to false, so we can restart if we click start again.
      this.setState({ run: false });
    }

    console.groupCollapsed(type);
    console.log(data); //eslint-disable-line no-console
    console.groupEnd();
  };

  componentDidCatch(error, errorInfo) {
    this.setState({ error });
    unregister();
  }

 

  render() {
    const { view,run, stepIndex, steps } = this.state;
   

    if (view) {
      return( <div>
      {this.props.children}

       <Joyride
          callback={this.handleJoyrideCallback}
          run={run}
          stepIndex={stepIndex}
          steps={steps}
         
        />
      
      
      </div>);
    } else {
      return null;
    }
  }
}