React stepzilla 中的 React 路由器

Question

I am using react stepzilla to create a step wizzard for my forms. Now, I need to show the URL path for each step in the browser. By default stepzilla does not show the URL paths.

Is it possible to include React router and include the stepzilla component in the routes?

Here is my component that defined the steps and render the react stepzilla component:

 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

Here's one way to do it:

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 example here .