reactjs - 基于状态创建动态 React Route 组件

Question

我正在创建一个网络应用程序，我将在前端有多个“规范”，其数量是通过后端数据库的响应确定的。我想要的是为每个规范创建一个 React Route。我想动态地执行此操作，这样如果我在后端数据库中添加更多规范，那么我就不必在前端添加一堆硬编码路由来匹配。

我使用 Jumpsuit 作为 React/Redux 包装器。对于规范，我查询后端并将规范存储在状态数组中。我可以毫无问题地从状态获取此规范数组，但是，如果我尝试基于此规范数组动态创建路由(每个规范一个路由)，那么它不会创建它们。

下面是我的代码(减去导入)。目前，我只是尝试为每个动态路线提供相同的“Spec”组件，只是一个非常简单的组件，它呈现几个单词。我创建了一些按钮，可以在单击时导航到这些路线，但是当我单击它们时，网址会更改为正确的路线，但页面根本不会更改。如果我将主要组件的 Prop 打印到控制台并查看路线，我可以看到动态的 Prop 不存在。我没有收到任何控制台错误。

export default Component({

    componentDidMount() {
        // Check if the specs need to be loaded
        if (this.props.specs.length == 0) {
            axios.get('/getspecs')
                .then((specs) => {
                    // Load specs into state
                    QuizList.loadSpecs(specs.data.facet_counts.facet_fields.spec.filter((val, i) => {return (i%2==0)}));
                })
                .catch((error) => {
                    console.log(error);
                });
        }
    },

    loadSpecRoutes() {
        // Loop through specs array in state and create route for each
        return this.props.specs.map((spec, i) => {
            return(
                <Route path={`/spec/${spec}`} component={Spec} />
            );
        });
    },

    render () {
        return (
            <Router history={browserHistory}>
              <Route path='/' component={App}>
                <IndexRoute component={Home}/>
                <Route path='/account' component={Account}/>
                <Route path='/quizzes' component={QuizRoot}/>
                {this.loadSpecRoutes()} <-- where I want to load routes
              </Route>
            </Router>
        );
    }
}, (state) => ({
    auth: state.user.auth,
    specs: state.quizList.specs
}))

不确定我的处理方式是否完全错误，但是如何为状态数组中的每个值创建一个 Route 组件？

Answer 1

您实际上可以使用动态路由并创建可以动态渲染规范的包装器组件，而不是为每个规范创建路线。包装器可以做的事情很少，甚至只是一个 div 标签。或者它可以是一个模板，例如博客页面，除了文章内容之外，它具有所有样式。这取决于您的每个规范的不同程度

现在我们看看路线，它可以简化为类似

<Router history={browserHistory}>
  <Route path='/' component={App}>
    <IndexRoute component={Home}/>

    <Route path='/account' component={Account}/>
    <Route path='/quizzes' component={QuizRoot}/>
    <Route path='/specs/:spec' component={Spec} />
  </Route>
</Router>

然后在Spec组件中，您可以执行以下操作

class Spec extends Component {
  render () {
    const {spec} = this.props.params

    switch (spec) {
      case 'spec1':
        return <SpecTypeA />
      case 'spec2':
        return <SpecTypeB />
      default:
        return <GeneralSpec />
    }
  }
}