1

I'm building a web-app containing a chapter/lesson structure. Since I would like to avoid saving the html/react code in my DB, my idea was to save the lessons in .jsx files in the folder structure and load the appropriate file by setting up routes accordingly. My routes currently:

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

Since I want to avoid adding a new route for every new lesson that I add, how do I best load the appropriate file?

I tried the following:

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

But of course this doesn't work. I'm stuck - any good ways of solving this problem? Is it possible to load a component from within a component?

pwwolff
  • 606
  • 1
  • 5
  • 20

1 Answers1

0

If you are happy to use other technology, the easiest option here is to use nextjs. Please have a look at https://github.com/zeit/next.js/. This is what you are exactly looking for. For every chapter, create a folder and for every lesson you can create a file with the lesson name. It will definitely save your time in the future and nextjs is nothing more than server side rendering for react application.

Prakash Kandel
  • 1,043
  • 6
  • 12