根据状态创建动态 React Route 组件答案

【问题标题】：Create dynamic React Route components based on state根据状态创建动态 React Route 组件
【发布时间】：2017-06-17 23:12:31
【问题描述】：

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

我使用 Jumpsuit 作为 React/Redux 包装器。对于规范，我查询后端并将规范存储在 state 的数组中。我可以从 state 中获取这个 spec 数组没有问题，但是，如果我尝试基于这个 spec 数组动态创建路由（每个 spec 一个路由），那么它不会创建它们。

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

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 组件？

【问题讨论】：

标签： reactjs dynamic routes redux state

【解决方案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 />
    }
  }
}

【讨论】：