[Feature]: Do we support dynamic routing?

[bosens-China]

这个功能解决了什么问题？

有一些很重复的场景，可能只是内容不同，其他都是相同的，如果能暴露一个动态路由，可以通过编程式的来处理所有数据这就太完美了。

你期望的 API 是什么样子的？

在docs文件下创建类似于 :id的文件夹表示这个是一个动态组件，在文件夹内创建 index.tsx等文件，接收一个props包含id，这样就可以批量处理了。

[Timeless0911]

Rspress just like many similar frameworks, is a static site generator that uses file-based convention routing. You can try using Modern.js or other frameworks to build your own document site to meet these dynamic requirements.

[Timeless0911]

This feature can be implemented into Rspress, but we don't have plans to do now. If you are interested, you can contribute a PR. FYI: https://vitepress.dev/guide/routing#dynamic-routes

[bosens-China]

@Timeless0911 如果我在其他框架，例如next能直接使用你们的ui吗？就是默认的主题，跟我现在在rspress看到的一致

[Timeless0911]

这当然不能了

[bosens-China]

这当然不能了

😃没办法支持吗

[Timeless0911]

Not our goal and if you are interest, you can contribute a PR.

[bosens-China]

老哥业务太多了，实在没办法贡献呀😄

[ulivz]

Build-time solution

See: https://v2.rspress.rs/zh/plugin/system/plugin-api#addpages

Runtime solution

[!WARNING] Limitations: this will cause a short 404 before rendering <Foo /> at production, maybe we need offer an offical runtime route hook api as a better solution.

In 2.0, I found a workaround, if you want to build foo/{id}, you can custom theme layout like this

// theme/index.tsx
import { Layout as BasicLayout } from 'rspress/theme';
import { useLocation } from 'rspress/runtime';
import { Nav } from '@rspress/theme-default';

import { Foo } from '../src/components/Foo';
import { NotFoundLayout } from '../src/components';

const Layout = () => {
  const location = useLocation();

  if (location.pathname.startsWith('/foo')) {
    return (
      <>
        <Nav />
        <Foo />
      </>
    );
  }

  return (
      <BasicLayout NotFoundLayout={NotFoundLayout} />
  );
};

export { Layout };

export * from 'rspress/theme';

Then in <Nav />, you can use react router to handle dynamic routes.

[ulivz]

Updated: continuation of the previous comment, workaround of fixing a short 404 in Runtime solution, you need to diable the SSG for NotFoundLayout.

export const isInSSR = () => process.env.__SSR__;

export function NotFoundLayout() {
  if (isInSSR()) {
    return null;
  }
  // ... rest impl
}

We adopt it at: https://github.com/bytedance/UI-TARS-desktop/pull/918

[SoonIter]

Limitations: this will cause a short 404 before rendering <Foo /> at production, maybe we need offer an offical runtime route hook api as a better solution.

This requires the server customizing deploy, such as falling back to "index.html" like SPA instead of falling back to "404.html" (MPA).

Its behavior during deployment is very similar to the history fallback in a Single Page Application (SPA).

ref: https://rsbuild.rs/zh/config/server/history-api-fallback#serverhistoryapifallback