Реагировать роутер в реагировать степзилла - PullRequest
Новая
       11

Реагировать роутер в реагировать степзилла

0 голосов
/ 06 декабря 2018

Я использую реагирует на stepzilla , чтобы создать волшебника для моих форм.Теперь мне нужно показать путь URL для каждого шага в браузере.По умолчанию stepzilla не показывает пути URL.

Можно ли включить маршрутизатор React и включить компонент stepzilla в маршруты?

Вот мой компонент, который определил шаги и визуализирует реакциюкомпонент 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;

1 Ответ

0 голосов
/ 06 декабря 2018

Вот один из способов сделать это: 

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 здесь .

...