Question

我正在使用react-router为9页表单设置进度条。我的目标是使用切换和路由组件为用户浏览的每一页更新1/9宽度的条形。

我目前在访问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

您可以编写一个自定义开关并使用它代替默认开关：

-r 30

使用React Router创建进度条

1 个答案: