单页应用 url 管理

Question

通常在单页应用程序 (spa) 中，我确实有一个页面有一个 sidenav 菜单。在该菜单中，有多个锚标记。
那些锚标签的 url 将由 angular/react/sammy js 路由器处理，主 div 将根据控制器返回的 html 进行刷新。
很简单，对吧？
但想象一下这样一个场景，用户通过浏览器地址栏直接访问锚标记url。那么只有返回的html段会加载到整个页面。
有什么办法可以处理这种情况吗？我的意思是，只要用户直接访问 url，he/she 就会得到正确处理？

编辑： 可能是我对问题陈述不太清楚。让我详细说明一下：

假设我的页面url是：abc.com/dashboard
此页面有一个导航菜单和一个 div 部分，其 class 名称为 "main-container"
用户单击导航菜单中的 link，路由器将 url 移动到 abc。com/view/listofXYZ。因此，我们的 "main-container" div 将加载 url abc.com/view/listofXYZ
现在另一个用户，直接转到 abc.com/view/listofXYZ url 然后点击 eneter。然后，该页面将仅包含 url 的响应 html，即所有导航菜单和 div 都消失了。

我的问题是，我们是否可以实施一些设计方法，使这两者运作良好？

Answer 1

使用 React 路由器，您可以简单地处理 onEnter 事件，当用户提供新的 URL 时触发。你可以这样做，即：

const onEnter = (e) => {
    console.log(e.location.pathname);
}

/* ... */

<Route path="/" onEnter={onEnter} component={MyComponent} />

此示例应在给出时在控制台中记录新的 URL。您可以根据需要进一步解释它以进行适当的突变。

Answer 2

最好选择 angular ui-router 而不是 sammy js router，当然我不知道。但是在 angular-ui-router 中，我们使用 ui-router 的 $stateProvider 来定义状态和 urls。即使用户直接在浏览器中输入url，只有在状态中定义的url匹配时，他才会被正确寻址。

https://github.com/angular-ui/ui-router/tree/legacy 请参阅此处了解更多信息。

这是一个例子，

$stateProvider.state('',{
   url: '/',
   tempate: 'path/to/.html',
   controller: 'controllerToHandle'
})
.state('home', {
   url: '/home',
   template: 'path/to/home.html',
   controller: 'HmeCtrl'
})
.state('home.list',{  //defines child states with dot
   url: '/list', //shows url as home/list because it is a child state
   template: 'path/to/list.html'
})

如果没有匹配的路径则使用$urlRouterProvider.otherwise('/') 同样，用户可以从 home 遍历到 list 例如，www.my-app.com 是您的主机名。如果他输入 www.my-app.com/home/list 作为 url /home/list 匹配，他将被带到 home/list 页面，如果他输入任何错误 url，那么他将被带到home 页，因为 otherwise 方法。

如果react/sammy路由器中有这样的东西，这样做更好的解决方案

单页应用 url 管理

Single page app url management

jquery

sammy.js

angularjs

single-page-application

reactjs