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

Question

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

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

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

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 />
    }
  }
}

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

Create dynamic React Route components based on state

state

routes

dynamic

reactjs

redux