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 Router

1 个答案: