文章/答案/技术大牛

发布

问Stenciljs路由问题
EN

Stack Overflow用户

提问于 2021-07-13 20:32:30

回答 1查看 82关注 0票数 0

我在我的stenciljs应用程序的app-root.txs文件中声明了以下路由：

<main id="main">
     <div class="ba-content-header">
       <stencil-router>
          <stencil-route url="/" component="post-home"/>
          <stencil-route url="/editor" component="page-home"/>
       </stencil-router>
     </div>

在index.html文件中使用approot组件：

<body>

 <app-root></app-root>

</body>

现在，默认路由正常工作，并且在该组件上有一个具有按钮的表单元素：

<form action="/editor">
   <button
     id="send-message"
     class="ba-btn ba-btn-primary"
     type="submit">
     <span>Send Message</span>
   </button>
 </form>

我使用/editor路由作为表单操作，当用户单击Send Message按钮时，我希望他被导航到由该路由表示的组件。这在带有npm start的webpack开发服务器上本地工作，但我在nginx Web Server上得到一个503错误。我尝试在nginx.conf文件中输入以下条目：

location / {
    try_files $uri /index.html;
}

但无济于事，问题依然存在。这个问题的解决方案是什么？

stenciljs

javascript

reactjs

typescript

回答 1

Stack Overflow用户

发布于 2021-07-13 21:44:33

我的nginx.conf几乎是一样的，但是我的uri有点不同($uri/)，所以也许你可以试试这个？

location / {
  try_files $uri $uri/ /index.html;
}

编辑:事实上，我注意到你没有"stencil-route-switch"，不知道这是不是原因？(或者exact={true}对于根目录)这是我所拥有的(使用nginx在部署环境中工作)

<stencil-router>
  <stencil-route-switch scrollTopOffset={0}>
    <stencil-route url="/" component="app-welcome-page" exact={true} />
    <stencil-route url="/examples" component="app-examples-page" />
  </stencil-route-switch>
</stencil-router>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68362483

复制

相似问题

问Stenciljs路由问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Stenciljs路由问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Stenciljs路由问题
EN