React stepzilla 中的 React 路由器

Question

我正在使用 react stepzilla 为我的表单创建步骤向导。现在，我需要在浏览器中显示每个步骤的 URL 路径。默认情况下，stepzilla 不显示 URL 路径。

是否可以在路由中包含 React 路由器并包含 stepzilla 组件？

这是我定义步骤并呈现 React stepzilla 组件的组件：

const StepNavigation = (props) => {
  const steps =
      [
        { name: '1', component: <Intro {...props} /> },
        { name: '2', component: <UserForm {...props} /> },
        { name: '3', component: <Finish {...this.props} /> },
      ];

  return (
    <div className="stepNavigation">
      <StepZilla
        steps={steps}
        preventEnterSubmission
      />
    </div>
  );
};

export default StepNavigation;

Answer 1

这是一种方法：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import StepZilla from "react-stepzilla";

const Step = ({ name }) => {
  return <h1>Step:{name}</h1>;
};

const steps = [
  { name: "Step1", component: <Step name="One" /> },
  { name: "Step2", component: <Step name="Two" /> }
];

function App({ history }) {
  const handleChange = step => {
    history.push({
      pathname: "/",
      search: `?step=${step}`
    });
  };

  return (
    <div className="App">
      <StepZilla steps={steps} onStepChange={handleChange} />
    </div>
  );
}

const RoutedApp = () => (
  <BrowserRouter>
    <Switch>
      <Route path="/" render={App} />
    </Switch>
  </BrowserRouter>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<RoutedApp />, rootElement);

CodeSandbox 示例 here。

React stepzilla 中的 React 路由器

React router in react stepzilla

javascript

reactjs

react-router

react-stepzilla