React 应用中的路由 - 基于 URL 参数加载 jsx

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 应用程序的服务器端渲染。