StaticRouter не работает с динамическими маршрутами в рендере сервера - PullRequest
Новая
       39

StaticRouter не работает с динамическими маршрутами в рендере сервера

1 голос
/ 03 июля 2019

У меня есть динамический параметр в маршруте.Когда я непосредственно открываю URL, он выдает ошибку.

Чтобы мой сервер знал о маршруте, я использую статический маршрутизатор при рендеринге сервера.

Вот мой код рендеринга сервера: 

const serverRender = (req, res) => {
  const routes = [
    {
        path: '/',
        exact: true,
        component: Signin
    }
    {
        path: '/shared/:id',
        component: Shared,
        fetchInitialData: path => sharedInitialData(path)
    }
  ];

    const activeRoute = routes.find(route => matchPath(req.url, route)) || {}

    const promise = activeRoute.fetchInitialData ? activeRoute.fetchInitialData(req.path) : Promise.resolve()

    const theme = createMuiTheme({
        palette: {
            primary: blue
        },
        typography: {
            useNextVariants: true
        }
    });

    const sheets = new ServerStyleSheets();

    promise.then(data => {
        const app = renderToString(
            sheets.collect(
                <ThemeProvider theme={theme}> 
                    <Provider store={store}>
                        <StaticRouter location={req.url} context={{data}}>
                            <App />
                        </StaticRouter>
                    </Provider>
                </ThemeProvider>
            )
        )

        const css = sheets.toString();
        res.send(renderFullPage(app, css))
    })
    .catch(error => console.log(error));
}


const renderFullPage = (html, css) => `
    <!DOCTYPE html>
    <html>
        <head>
            <style>
                a{
                    text-decoration: none;
                    color: #000
                }
                ${css}
            </style>
        </head>
        <body>

            <div id="root">${html}</div>

            <script src="main.js"></script>

        </body>
    </html>
`


async function sharedInitialData(path) {
  const id = path.split('/').pop();
  return id;


}

Когда я открываю / shared / 12345, я получаю сообщение об ошибке в консоли. Uncaught SyntaxError: Неожиданный токен

main.js - это мой файл пакета, сгенерированный webpack

Мой файл пакета заполняется HTML вместо js.Я думаю, что это проблема

1 Ответ

1 голос
/ 03 июля 2019

Я думаю, что проблема в пути в <script>, который вы указали в renderFullPage().Я думаю, что ваш main.js не доступен.вы можете попробовать добавить косую черту (/) в путь?

попробуйте изменить <script src="main.js"></script> на <script src="/main.js"></script>

...