子路由不会在 SSR React App 上重新加载

Question

每次我尝试在我的任何子路由上重新加载页面时，页面都不会正确刷新。它只显示 HTML 而没有 CSS 或 JavaScript.

我查看了 react-router-config 文档、react-router ssr 文档并一直在修改我的 Routes.js 文件。

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
            }
        ]
    }
]

每当我刷新子路由页面时，我都会在控制台中收到此错误：

语法错误：预期的表达式，得到“<”

编辑

这就是我导入 style.css 和 bundle.js 文件的方式。

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>
    `
}

Answer 1

我不得不在 renderer.js 文件中的那些文件前面添加一个“/”。

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

子路由不会在 SSR React App 上重新加载

Child Routes won't reload on SSR React App

renderer

reload

nested-routes

reactjs

server-side-rendering