Search code examples
reactjsreloadrendererserver-side-renderingnested-routes

Child Routes won't reload on SSR React App

Every time I try to do a page reload on any of my child routes, the page doesn't refresh correctly. It only shows the HTML with no CSS or JavaScript.

I have looked at the react-router-config documentation, react-router ssr documentation and have been tinkering with my Routes.js file.

Routes.js

export default [
    {
        ...App,
        routes: [
            {
                ...Home,
                exact: true,
                path: '/'
            },
            {
                ...CriticPage,
                path: ['/nba', '/nhl', '/pga'],
                routes: [
                    {
                        ...SportStats,
                        path: [
                          '/nba', '/nba/critics', '/nba/players', '/nba/fans',
                          '/nhl', '/nhl/critics', '/nhl/players', '/nhl/fans',
                          '/pga', '/pga/critics', '/pga/players', '/pga/fans']
                    }
                ]
            },
            {
                ...ProfilePage,
                path: '/profile'
            },
            {
                ...NotFoundPage
            }
        ]
    }
]

Whenever I refresh a child route page I get this error in the console:

SyntaxError: expected expression, got '<'

Edit

This is how I'm importing my style.css and bundle.js files.

renderer.js

import React from 'react'
import { renderToString } from 'react-dom/server'
import { StaticRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import { renderRoutes } from 'react-router-config'
import serialize from 'serialize-javascript'
import Routes from '../client/Routes'

export default (req, store, context) => {
    const content = renderToString(
        <Provider store={store}>
            <StaticRouter location={req.path} context={context}>
                <div>
                    {renderRoutes(Routes)}
                </div>  
            </StaticRouter>
        </Provider>
    )

    return `
        <html>
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel="icon" href="data:,">
                <link rel="stylesheet" type="text/css" href="style.css">
                <title>Goat</title>
                <link rel="icon" type="image/png" href="images/favicon.ico"/>
            </head>
            <body>
                <div id="app">${content}</div>
                <script>
                    window.INITIAL_STATE = ${serialize(store.getState())}
                </script>
                <script src="bundle.js"></script>
            </body>
        </html>
    `
}
Solution

  • I had to add a '/' in front of those files in the renderer.js file. 

    <link rel="stylesheet" type="text/css" href="/style.css">
<link rel="icon" type="image/png" href="/images/favicon.ico"/>
<script src="/bundle.js"></script>