Дочерние маршруты не будут перезагружаться в приложении SSR React - PullRequest
Новая
       30

Дочерние маршруты не будут перезагружаться в приложении SSR React

1 голос
/ 08 июня 2019

Каждый раз, когда я пытаюсь перезагрузить страницу на любом из моих дочерних маршрутов, страница не обновляется правильно. Он показывает только HTML без CSS или JavaScript.

Я просмотрел документацию по activ-router-config, документацию по activ-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: ожидаемое выражение, получено '<' </p>

Редактировать

Вот так я импортирую мои файлы 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>
    `
}

1 Ответ

0 голосов
/ 09 июня 2019

Мне пришлось добавить «/» перед этими файлами в файле 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>
...