我正在构建一个包含章节/课程结构的网络应用程序。由于我想避免在我的数据库中保存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`};
但当然这不起作用。我被困 - 解决这个问题的任何好办法?是否可以从组件中加载组件?
答案 0 :(得分:0)
如果您乐意使用其他技术,最简单的选择就是使用nextjs
。请看https://github.com/zeit/next.js/。
这就是你正在寻找的东西。对于每个章节,创建一个文件夹,对于每个课程,您可以使用课程名称创建文件。
它肯定会节省您的时间,nextjs
只不过是反应应用程序的服务器端渲染。