Styles doesn't work inside nested route

Question

I have few routes in my website and I use the same layout with linked styles for all of my pages.

For example in route / or /abc or /other my layout and styles works good. However, if I load route /other/abc my layout still works but my styles don't load.

Here's some code:

My layout:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Express MVC Example</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <ul class="menu">
     <li><a href="/">home</a></li>
     ...
     <li><a href="/other/abc">other/abc</a></li>
   </ul>

    {{{ body }}}

</body>
</html>

This is my other route controllers:

import express from 'express'

export default (app) => {
  const api = express.Router();

  api.get('/', (req, res) => {
    console.log('client connected');
    res.render('other/main');
  });

  api.get('/abc', (req, res) => {
    res.render('other/abc');
  });

  return api
}

I use handlebars for views.

How do you serve your static file, `style.css` in this case, to client? — kkkkkkk, Apr 24 '18 at 10:37
@Khang This way: `app.use(express.static(path.join(__dirname, 'static')));` — Den Gas, Apr 25 '18 at 10:36

score 4 · Accepted Answer · answered Apr 25 '18 at 13:56

4

Problem is at how you specify the style.css link in your html, I think this will solve it:

<link rel="stylesheet" href="/style.css">

If that does not work, look at this link Relative path in HTML (actually you should look at it anyway)

answered Apr 25 '18 at 13:56

kkkkkkk

7,628
2
18
31

Styles doesn't work inside nested route

1 Answers1