zhangyuang/ssr

动态路由前缀

Closed this issue · 8 comments

最近在研究使用这个框架,在nextjs中,可以通过目录名来动态实现,拿个最常见的使用场景,比如国际化路由前缀,该怎么实现呢,比如:
www.xxx.com/zh
www.xxx.com/zh/about
www.xxx.com/zh/news/detail?id=122

能否给个实现思路或简单代码示例?谢谢~

ssr 框架同样可以通过目录名来生成路由。例如创建pages/zh/render.vue 等于/zh 路由, /pages/zh/about/render.vue等于 /zh/about 路由。

也可以使用固定的config.prefix或者动态prefix 使得不需要创建zh文件夹,直接给路由层面添加统一的前缀即可

嗯,刚看了文档中动态prefix的示例,但是没太看懂,比如我要实现news.controller.ts,改造前是这样

@Controller('news')
export  class AppController {
//...省略
@Get('list')
async handlerIndex (@Req() req: Request, @Res() res: Response): Promise<void> {
    const ctx = {
      request: req,
      response: res,
      apiService: this.apiService
    }
    const stream = await render(ctx, {
      stream: true,
      onError: (err) => {
        console.log('ssr error', err)
        render(ctx, {
          stream: true
        }).then(csrStream => {
          csrStream.pipe(res)
        })
        return null
      },
      onReady () {
        // for normal ssr end
        stream.pipe(res)
      }
    })
}
@Get('detail:id')
async handlerDetail (@Req() req: Request, @Res() res: Response): Promise<void> {
    const ctx = {
      request: req,
      response: res,
      apiService: this.apiService
    }
    const stream = await render(ctx, {
      stream: true,
      onError: (err) => {
        console.log('ssr error', err)
        render(ctx, {
          stream: true
        }).then(csrStream => {
          csrStream.pipe(res)
        })
        return null
      },
      onReady () {
        // for normal ssr end
        stream.pipe(res)
      }
    })
}
}

那如果想通过动态prefix支持国际化路由,我该怎么写呢

配置动态路由前缀为prefix:/zh后也就是浏览器打开localhost:3000/zh/list 等于访问到pages/list/render.vue组件,也就是前端router的/list路由。zh为基准path无需在前端路由中添加

嗯,原理是这样,但是我上面所写的news.controller.ts的根路由不是/,而是/news 【news.controller.ts的根路径是@controller('news') 不是@controller('/')】,接合动态路由示例和我理解的,那是不是如果想支持动态prefix是不是原来的多个控制器都要统一写在index.controller.ts中,并且包含不同handler不同语言handler,比如/zh/news => handlerZhNews, /zh/news/detail => handlerZhNewsDetail.....

路由支持通配符,自行查询对应的Node.js框架文档

帮我看看,我配了prefix,为啥会报 With Path: /zh/news search component failed
image

你写在了onError里面。。。先看懂示例代码的含义

哦,忘记上面的了.........