CODEWITHSUNDEEP
javascriptreactjsdocusaurus
kaytan
kaytan

Reputation: 51

How to integrate dynamic routes in Docusaurus with react-router

I have a website made with Docusaurus v2 that currently contains documentation. However, I would like to add a page of a list of workflows where if a workflow in the list is clicked, the user would be shown a page of additional details of that workflow. For now it seems docusaurus.config seems to be handling most of the routing, but is there a way I can add a dynamic route like /workflows/:id? I made a separate standalone app which had a Router object and it worked if my App.js looks like this:

// App.js
import Navigation from './Navigation'
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';

function App() {
  return (
  <Router>
    <Navigation />
    <Switch>
      <Route path="/" exact component={Home}></Route>
      <Route path="/workflows" exact component={Workflows}></Route>
      <Route path="/workflows/:id" component={WorkflowItem}></Route>
    </Switch>
  </Router>
  )
}

Is it possible to add the Router somewhere in Docusaurus? Thanks!

Upvotes: 5

Views: 4245

Answers (1)

Andre Stewart
Andre Stewart

Reputation: 51

I solved this by creating a simple plugin to add my own custom routes. Documentation here.

Let's call the plugin plugin-dynamic-routes.

// {SITE_ROOT_DIR}/plugin-dynamic-routes/index.js

module.exports = function (context, options) {
    return {
        name: 'plugin-dynamic-routes',

        async contentLoaded({ content, actions }) {
            const { routes } = options
            const { addRoute } = actions

            routes.map(route => addRoute(route))
        }
    }
}

// docusaurus.config.js
const path = require('path')

module.exports = {
    // ...
    plugins: [
        [
            path.resolve(__dirname, 'plugin-dynamic-routes'),
            { // this is the options object passed to the plugin
                routes: [
                    { // using Route schema from react-router
                        path: '/workflows',
                        exact: false, // this is needed for sub-routes to match!
                        component: '@site/path/to/component/App'
                    }
                ]
            }
        ],
    ],
}

You may be able to use the above method to configure sub-routes as well but I haven't tried it. For the custom page, all you need is the Switch component (you are technically using nested routes at this point). The Layout component is there to integrate the page into the rest of the Docusaurus site.

// App.js

import React from 'react'
import Layout from '@theme/Layout'
import { Switch, Route, useRouteMatch } from '@docusaurus/router'

function App() {
    let match = useRouteMatch()

    return (
        <Layout title="Page Title">
            <Switch>
                <Route path={`${match.path}/:id`} component={WorkflowItem} />
                <Route path={match.path} component={Workflows} />
            </Switch>
        </Layout>
    )
}

Upvotes: 5

Related Questions