Я использую 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;
0
xela84 6 Дек 2018 в 01:45

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

1
Colin Ricardo 5 Дек 2018 в 23:01