简体   繁体   English

角路由会在手动刷新或直接键入url时进入主页

[英]Angular routing takes to home page on manual refresh or directly typing url

I have angular app being served by node.js server. 我有由node.js服务器提供的角度应用程序。 Upon manual refresh or directly typing url /xyz or /abc, as shown in example below.I see it to be directed to home page. 手动刷新或直接输入url / xyz或/ abc时,如下例所示,我将其定向到主页。

Ex:I click on naviagtion button(xyz and abc) it takes me to https://mywebsite/xyz and https://mywebsite/abc correspondingly. 例如:我点击导航按钮(xyz和abc),它将带我分别到达https:// mywebsite / xyzhttps:// mywebsite / abc I see only /xyz or /abc appended to https://mywebsite . 我只看到/ xyz或/ abc附加到https:// mywebsite

I am angular in production, I have this served as static file. 我从事生产工作,我将其用作静态文件。 I will show some code snippet. 我将显示一些代码片段。 Please I authenticate users based on JWT, it is stored in localStorage 请基于JWT对用户进行身份验证,它存储在localStorage中

app-routing 应用路由

..I have imported those components here..
const appRoutes: Routes = [
  { path: 'home', component: HomeComponent , canActivate: [AuthGuard]},
  { path: '', component: HomeComponent,canActivate: [AuthGuard],
  //{ path: '', component: SigninComponent,
    children: [ 
      { path: '', component: xyz },
      { path: 'xyz', component: xyz },
      { path: 'abc', component: abc },
    ]}
];
@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes

    )
  ],
  exports: [RouterModule],
  providers: [],
})
export class RoutingModule { }

app.js app.js

app.use(express.static(path.join(__dirname, '/client')));

app.get('/',function(req,res){  
  res.sendFile(path.join(__dirname, 'client/index.html'));
}); 
    let index = path.join(__dirname, '../../client/index.html');
    res.sendFile(index);

I expected upon redirecting to index.html to take me to app-routing. 我希望重定向到index.html时可以进入应用程序路由。 So, that I make manual refresh in https://mywebsite/abc I remain in https://mywebsite/abc itself and not to home page. 因此,我在https:// mywebsite / abc中进行手动刷新,但仍留在https:// mywebsite / abc本身而不是主页中。

index.html index.html

<!doctype html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title> Portal</title>
    <base href="/">
    <app-root>

        </app-root>
    </body>
</html>



If I understand correctly the page that you are currently on is automatically getting redirected on refresh. 如果我正确理解,刷新时会自动重定向到您当前所在的页面。

To fix this you need to enable hash routing in the router like so: 要解决此问题,您需要像这样在路由器中启用哈希路由:

imports: [
    RouterModule.forRoot(appRoutes, {useHash: true})
  ],

This will make angular not redirect to base url on refresh 这将使角度在刷新时不会重定向到基本URL

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM