Question

我正在构建一个包含章节/课程结构的网络应用程序。由于我想避免在我的数据库中保存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`};

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

Answer 1

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

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

1 个答案: