Создайте индикатор выполнения с помощью React Router

Question

Я настраиваю индикатор выполнения для 9-страничной формы, используя реагирующий маршрутизатор. Моя цель - планка обновления 1/9 ширины для каждой страницы, которую проходит пользователь - используя компоненты Switch и Route.

В настоящее время у меня возникают проблемы с доступом к числу дочерних элементов для Switch и автоматизацией индикатора выполнения. Конечно, обходной путь может быть жестко задан 1/9 каждый раз, когда компонент монтируется, но это не идеально.

// Routes I'm want to get 'progress' from
let routes = (
      <Switch>
        <Route path="/form/" exact component={Question0} />
        <Route path="/form/1" component={Question1} />
        <Route path="/form/2" component={Question2} />
        <Route path="/form/tip1" component={Tip1} />
        <Route path="/form/3" component={Question3} />
        <Route path="/form/tip2" component={Tip2} />
        <Route path="/form/4" component={Question4} />
        <Route path="/form/tip3" component={Tip3} />
        <Route path="/form/5" component={Question5} />
      </Switch>
    );

Я также пытался поиграться с React.Children, но безуспешно. Есть ли более элегантное решение для этого? Спасибо! :)

Answer 1

Вы можете написать собственный переключатель и использовать его вместо стандартного:

const SwitchProgress = withRouter(props => {
  const progress = props.children.findIndex(
    route => matchPath(props.location.pathname, route.props)
  ) + 1;
  return (
    <React.Fragment>
      <div>Progress: {progress} / {props.children.length}</div>
      <Switch>
        {props.children}
      </Switch>
    </React.Fragment>
  )
});