Question

每次我尝试在任何子路径上重新加载页面时，页面均无法正确刷新。它只显示没有CSS或JavaScript的HTML。

我查看了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
            }
        ]
    }
]

每当刷新子路线页面时，都会在控制台中出现以下错误：

SyntaxError：期望的表达式，得到了'<'

修改

这就是我导入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上重新加载

1 个答案: