React app中的路由 - 根据URL参数加载jsx

时间:2018-02-13 23:24:21

标签: javascript node.js reactjs routing

我正在构建一个包含章节/课程结构的网络应用程序。由于我想避免在我的数据库中保存html / react代码,我的想法是将.jsx文件中的课程保存在文件夹结构中,并通过相应地设置路由来加载相应的文件。我的路线目前:

export default (
  <Route path="/" component={App}>
    <IndexRoute component={Dashboard} />
    <Route path="/lessons/:chapter/:lesson" component={withRouter(LessonView)} />
    <Route path="*" component={NoMatch} />
  </Route>
);

由于我想避免为我添加的每个新课程添加新路由,如何最好地加载相应的文件?

我尝试了以下内容:

import Lesson from {`./lessons/${this.props.params.chapter}/${this.props.params.lesson}.jsx`};

但当然这不起作用。我被困 - 解决这个问题的任何好办法?是否可以从组件中加载组件?

1 个答案:

答案 0 :(得分:0)

如果您乐意使用其他技术,最简单的选择就是使用nextjs。请看https://github.com/zeit/next.js/。 这就是你正在寻找的东西。对于每个章节,创建一个文件夹,对于每个课程,您可以使用课程名称创建文件。 它肯定会节省您的时间,nextjs只不过是反应应用程序的服务器端渲染。