如何將 Docusaurus 中的動態路由與 react-router 集成

Question

我有一個使用 Docusaurus v2 制作的網站，目前包含文檔。 但是，我想添加工作流列表的頁面，如果單擊列表中的工作流，用戶將看到該工作流的其他詳細信息頁面。 目前看來docusaurus.config似乎正在處理大部分路由，但是有沒有辦法可以添加像/workflows/:id這樣的動態路由？ 我制作了一個單獨的獨立應用程序，它有一個路由器 object，如果我的 App.js 看起來像這樣，它就可以工作：

// 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>
  )
}

是否可以在 Docusaurus 的某處添加路由器？ 謝謝！

Answer 1

我通過創建一個簡單的插件來添加我自己的自定義路由來解決這個問題。 文檔在這里。

讓我們調用插件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'
                    }
                ]
            }
        ],
    ],
}

您也許可以使用上述方法來配置子路由，但我還沒有嘗試過。 對於自定義頁面，您只需要Switch組件（此時從技術上講，您使用的是嵌套路由）。 Layout組件用於將頁面集成到 Docusaurus 站點的 rest 中。

// 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>
    )
}