Search code examples
docusaurus

How do I add a react page to the sidebar?


I'm creating documentation for a project using docusaurus and markdown files are great for most of the documentation. However, I have created some react pages that I would like to add to the site, but cannot figure out how to include them in the sidebar navigation. Ideally I would be able to configure the order as with markdown files.

Docusaurus default folder structure

Output of default structure on webpage

According to another stackoverflow answer, in v1 this was not possible, however, now that docusaurus is v2 I was hoping this might have changed but can't find the solution in the documentation.


Solution

  • The workaround I've tried is simply importing my react components into .mdx files that can be saved in the docs folder. This allows components to be imported, but doesn't allow me to simply write content in react pages and add them to the sidebar without a seemingly unnecessary intermediary mdx file.

    In the below example the file test.mdx imports a component test.js containing a div with 'test' string.

    File Structure

    Working Example