Javascript 服务器端渲染+；使用Riot.js路由？

我正在使用Node+Riot.js+Grapnel路由库（它可以在客户端和服务器上工作）。我设法在客户机上设置路由，但我不知道如何在服务器上工作

我的客户端路由器的当前功能很简单。我只是将

opts.route

发送到适当的组件，然后它将请求的页面（也是一个组件）装载到

div

<x-layout>
  <div id="app-body"></div>

  <script>
    this.on('mount update', function() {
      riot.mount('#app-body', 'x-page-' + opts.route);
    });
  </script>
</x-layout>

这是显而易见的，因为节点不能执行DOM操作

我还尝试动态加载组件，如下所示

// Riot doesn't compiles such expressions `<x-page-{opts.route}>`
var tag = riot.tag2('x-layout', '<div id="app-body"><x-page-{opts.route}></x-page-{opts.route}></div>');
riot.render(tag, {route: 'dashboard'}); // --> <x-layout><div id="app-body"><x-page-{opts.route}></x-page-{opts.route}></div></x-layout>

// Compiles but not mounts (empty tag)
var tag = riot.tag2('x-layout', '<div id="app-body" riot-tag="x-page-{opts.route}"></div>');
riot.render(tag, {route: 'dashboard'}); // --> <x-layout><div id="app-body" riot-tag="x-page-dashboard"></div></x-layout>

// It's only working when I hard coded the tag name
var tag = riot.tag2('x-layout', '<x-page-dashboard></x-page-dashboard>');
riot.render(tag, {route: 'dashboard'}); // <x-layout><x-page-dashboard>___ CHILDREN COMPONENTS... ____</x-page-dashboard></x-layout>

//Riot不编译此类表达式``
var tag=riot.tag2（'x布局'，''）；
render（标记，{route:'dashboard'}）；//-->
//编译但不装载（空标记）
var tag=riot.tag2（'x布局'，''）；
render（标记，{route:'dashboard'}）；//-->
//只有当我硬编码标签名时，它才起作用
var tag=riot.tag2（'x布局'，''）；
render（标记，{route:'dashboard'}）；//\u子组件____

---

是否有任何可能的方法实现同构渲染+路由？我就快到了，只需要通过opts动态地传递组件名，我终于解决了它。解决方案是使用

name=“app\u body”

属性，而不是像我尝试的那样使用

id=“app body”

<x-layout>
  <div name="app_body"></div>

  <script>
    this.mountPage = (page) => {
      riot.mount(this.app_body, 'x-page-' + page);
    }

    if (opts.route)
      this.mountPage(opts.route)
  </script>
</x-layout>

this.mountPage=（page）=>{
mount（this.app_body，'x-page-'+page）；
}
如果（选择路线）
此.mountPage（选择路线）

感谢GianlucaGuarini的回应

工作示例

<x-layout>
  <div name="app_body"></div>

  <script>
    this.mountPage = (page) => {
      riot.mount(this.app_body, 'x-page-' + page);
    }

    if (opts.route)
      this.mountPage(opts.route)
  </script>
</x-layout>