Page Routes

For development based on React, if the application contains multiple pages, it is necessary to configure route settings for the application. Routing can be viewed as the mapping between access paths and React components. In extension development, routing can be used as follows:

Route definition

KubeSphere 4.0 adopts react-router V6 for frontend routing. To make route registration easier, KubeSphere adopts Route Object to write routes. Example:

let routes = [
    {
      path: "/",
      element: <Layout />,
      children: [
        { index: true, element: <Home /> },
        {
          path: "/courses",
          element: <Courses />,
          children: [
            { index: true, element: <CoursesIndex /> },
            { path: "/courses/:id", element: <Course /> },
          ],
        },
        { path: "*", element: <NoMatch /> },
      ],
    },
  ];

In some cases, you need to insert or replace new routes with existing routes. In such a scenario, you need to specify parentRoute as the parent route. For example, if you want to add a route to the left menu of the cluster management page, you first find the corresponding route definition in the ks console source code. In packages/clusters/src/routes/index.tsx, find the following code:

const PATH = '/clusters/:cluster';

const routes: RouteObject[] = [
  {
    path: '/clusters',
    element: <Clusters />,
  },
  {
    path: PATH,
    element: <BaseLayout />,
    children: [
      {
        element: <ListLayout />,
        path: PATH,
        children: [
          {
            path: `${PATH}/overview`,
            element: <Overview />,
          },
          ...

To add a route in Overview, use the following code:

const PATH = '/clusters/:cluster';

export default [
  {
    path: `${PATH}/demo`,
    element: <App />,
    parentRoute: PATH,
  },
];

In the preceding code, parentRoute indicates the parent route path of Overview.

Route registration

After you run yarn create:ext to initialize a directory for your extension, the routes directory is generated by default. The directory structure is as follows:

└── hello-world
    ├── Dockerfile
    ├── README.md
    ├── package.json
    └── src
        ├── App.jsx
        ├── index.js
        ├── locales
        │   ├── en
        │   │   ├── base.json
        │   │   └── index.js
        │   ├── index.js
        │   └── zh
        │       ├── base.json
        │       └── index.js
        └── routes
            └── index.js

You can define a route in routes/index.js, and then register the route in the entry file of the extensionn. Example:

import routes from './routes';  // Import the route file
import locales from './locales';  

const menu = {
  parent: 'topbar',
  name: 'hello-world',
  link: '/hello-world',
  title: 'HELLO_WORLD',
  icon: 'cluster',
  order: 0,
  desc: 'SAY_HELLO_WORLD',
  skipAuth: true,
};

const extensionConfig = {
  routes,
  menus: [menu],
  locales,
};

globals.context.registerExtension(extensionConfig);