React vite ssr 不让我使用路由（react-router-dom 的问题）

问题描述 投票：0回答：1

我正在使用react vite ssr，结构与示例项目相同，创建vite-react-ssr来制作landind页面，但是当我想实现像我们这样的路线时，没有发现有很多问题，就像我现在使用的那样BrowserRouter 向我展示

ReferenceError: document is not defined
    at getUrlBasedHistory 
    at Object.createBrowserHistory (C:...node_modules\@remix-run\router\dist\router.cjs.js:234:10)
    at Module.createBrowserRouter (C:..\node_modules\react-router-dom\dist\umd\react-router-dom.development.js:269:23)
    at Index (C:...\src\index.jsx:8:20)
    at renderWithHooks (C:..node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5662:16)
    at renderIndeterminateComponent (C:..node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5736:15)
    at renderElement (C:..node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5961:7)
    at renderNodeDestructiveImpl (C:\..node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6119:11)
    at renderNodeDestructive (C:\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6091:14)
    at renderContextProvider (C:\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5935:3)
    at renderElement (C:\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6032:11)
    at renderNodeDestructiveImpl (C:\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6119:11)
    at renderNodeDestructive (C:\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6091:14)
    at renderContextProvider (C:\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5935:3)
    at renderElement (C:\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6032:11)
    at renderNodeDestructiveImpl (C:node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6119:11)
    at renderNodeDestructive (\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6091:14)
    at renderIndeterminateComponent (C:\\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5790:7)
    at renderElement (C:\\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5961:7)
    at renderNodeDestructiveImpl (C:\\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6119:11)
    at renderNodeDestructive (C:\\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6091:14)
    at renderIndeterminateComponent (C:\\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5790:7)
    at renderElement (C:\\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:5961:7)
    at renderNodeDestructiveImpl (C:\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6119:11)
    at renderNodeDestructive (C:\U\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6091:14)
    at retryTask (C:\\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6543:5)
    at performWork (C:\\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6591:7)
    at C:\\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6915:12
    at scheduleWork (C:\\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:78:3)
    at startWork (C:\\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6914:3)
    at renderToStringImpl (C:\\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:6988:3)
    at Object.renderToString (C:\\node_modules\react-dom\cjs\react-dom-server-legacy.node.development.js:7080:10)
    at render (C:\\src\entry-server.jsx:10:31)
    at file:///C://server.js:58:28
favicon.ico

index,jsx（这两种方式看起来都出现相同的错误）

import React from 'react'
import { BrowserRouter as Router, Routes, Route, createBrowserRouter, RouterProvider } from 'react-router-dom'
import { Home } from './pages/Home'
import { Other } from './pages/Other'
import { NotFound } from './pages/NotFound'
import App from './App'
export const Index = () => {
    const routes = createBrowserRouter([
        {
            path: '/',
            element: <App/>,
            errorElement: <NotFound/>,
            children: [
                {
                    path: '/',
                    element: <Home/>
                }
            ]
        }
    ])
    return (
        /*<Router>
            <Routes>
                <Route index element={<Home />} />
                <Route path="/other" element={<Other />} />
                <Route path="*" element={<NotFound />} />
            </Routes>
        </Router>*/



        <RouterProvider router={routes}/>
    )
}

入口服务器.jsx

import React from 'react'
import ReactDOMServer from 'react-dom/server'
import App from './App';
import { StaticRouter } from 'react-router-dom/server'
import { Index } from '.';
import { Home } from './pages/Home';

export function render(url) {

  const html = ReactDOMServer.renderToString(
      <StaticRouter location={url}>
        <Index />
      </StaticRouter>
  )
  return { html }
}

entry-client.jsx

import './index.css'
import React from 'react'
import ReactDOM from 'react-dom/client'
import {Index} from './index'
import { Home } from './pages/Home'

ReactDOM.hydrateRoot(
  document.getElementById('root'),
  <React.StrictMode>
    <Index />
  </React.StrictMode>
)

我已经尝试了不同的方法来实现 BrowserRouter 但出现了相同的错误，并且我在没有 BrowserRouter 的情况下进行了尝试并加载页面并给出了此错误

chunk-IURPBYAF.js?v=2725bec9:21578 Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools
chunk-2NKYRYXZ.js?v=2725bec9:200 Uncaught Error: useRoutes() may be used only in the context of a <Router> component.
    at invariant (chunk-2NKYRYXZ.js?v=2725bec9:200:11)
    at useRoutesImpl (chunk-2NKYRYXZ.js?v=2725bec9:3495:34)
    at useRoutes (chunk-2NKYRYXZ.js?v=2725bec9:3492:10)
    at Routes (chunk-2NKYRYXZ.js?v=2725bec9:4152:10)
    at renderWithHooks (chunk-IURPBYAF.js?v=2725bec9:11566:26)
    at mountIndeterminateComponent (chunk-IURPBYAF.js?v=2725bec9:14944:21)
    at beginWork (chunk-IURPBYAF.js?v=2725bec9:15932:22)
    at HTMLUnknownElement.callCallback2 (chunk-IURPBYAF.js?v=2725bec9:3672:22)
    at Object.invokeGuardedCallbackDev (chunk-IURPBYAF.js?v=2725bec9:3697:24)
    at invokeGuardedCallback (chunk-IURPBYAF.js?v=2725bec9:3731:39)
invariant @ chunk-2NKYRYXZ.js?v=2725bec9:200
useRoutesImpl @ chunk-2NKYRYXZ.js?v=2725bec9:3495
useRoutes @ chunk-2NKYRYXZ.js?v=2725bec9:3492
Routes @ chunk-2NKYRYXZ.js?v=2725bec9:4152
renderWithHooks @ chunk-IURPBYAF.js?v=2725bec9:11566
mountIndeterminateComponent @ chunk-IURPBYAF.js?v=2725bec9:14944
beginWork @ chunk-IURPBYAF.js?v=2725bec9:15932
callCallback2 @ chunk-IURPBYAF.js?v=2725bec9:3672
invokeGuardedCallbackDev @ chunk-IURPBYAF.js?v=2725bec9:3697
invokeGuardedCallback @ chunk-IURPBYAF.js?v=2725bec9:3731
beginWork$1 @ chunk-IURPBYAF.js?v=2725bec9:19791
performUnitOfWork @ chunk-IURPBYAF.js?v=2725bec9:19224
workLoopSync @ chunk-IURPBYAF.js?v=2725bec9:19163
renderRootSync @ chunk-IURPBYAF.js?v=2725bec9:19142
performConcurrentWorkOnRoot @ chunk-IURPBYAF.js?v=2725bec9:18704
workLoop @ chunk-IURPBYAF.js?v=2725bec9:195
flushWork @ chunk-IURPBYAF.js?v=2725bec9:174
performWorkUntilDeadline @ chunk-IURPBYAF.js?v=2725bec9:382
Show 18 more frames
Show lessUnderstand this error
chunk-IURPBYAF.js?v=2725bec9:519 Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.
printWarning @ chunk-IURPBYAF.js?v=2725bec9:519
error @ chunk-IURPBYAF.js?v=2725bec9:503
errorHydratingContainer @ chunk-IURPBYAF.js?v=2725bec9:8767
recoverFromConcurrentError @ chunk-IURPBYAF.js?v=2725bec9:18759
performConcurrentWorkOnRoot @ chunk-IURPBYAF.js?v=2725bec9:18710
workLoop @ chunk-IURPBYAF.js?v=2725bec9:195
flushWork @ chunk-IURPBYAF.js?v=2725bec9:174
performWorkUntilDeadline @ chunk-IURPBYAF.js?v=2725bec9:382
Show 8 more frames
Show lessUnderstand this error
chunk-2NKYRYXZ.js?v=2725bec9:200 Uncaught Error: useRoutes() may be used only in the context of a <Router> component.
    at invariant (chunk-2NKYRYXZ.js?v=2725bec9:200:11)
    at useRoutesImpl (chunk-2NKYRYXZ.js?v=2725bec9:3495:34)
    at useRoutes (chunk-2NKYRYXZ.js?v=2725bec9:3492:10)
    at Routes (chunk-2NKYRYXZ.js?v=2725bec9:4152:10)
    at renderWithHooks (chunk-IURPBYAF.js?v=2725bec9:11566:26)
    at mountIndeterminateComponent (chunk-IURPBYAF.js?v=2725bec9:14944:21)
    at beginWork (chunk-IURPBYAF.js?v=2725bec9:15932:22)
    at HTMLUnknownElement.callCallback2 (chunk-IURPBYAF.js?v=2725bec9:3672:22)
    at Object.invokeGuardedCallbackDev (chunk-IURPBYAF.js?v=2725bec9:3697:24)
    at invokeGuardedCallback (chunk-IURPBYAF.js?v=2725bec9:3731:39)
invariant @ chunk-2NKYRYXZ.js?v=2725bec9:200
useRoutesImpl @ chunk-2NKYRYXZ.js?v=2725bec9:3495
useRoutes @ chunk-2NKYRYXZ.js?v=2725bec9:3492
Routes @ chunk-2NKYRYXZ.js?v=2725bec9:4152
renderWithHooks @ chunk-IURPBYAF.js?v=2725bec9:11566
mountIndeterminateComponent @ chunk-IURPBYAF.js?v=2725bec9:14944
beginWork @ chunk-IURPBYAF.js?v=2725bec9:15932
callCallback2 @ chunk-IURPBYAF.js?v=2725bec9:3672
invokeGuardedCallbackDev @ chunk-IURPBYAF.js?v=2725bec9:3697
invokeGuardedCallback @ chunk-IURPBYAF.js?v=2725bec9:3731
beginWork$1 @ chunk-IURPBYAF.js?v=2725bec9:19791
performUnitOfWork @ chunk-IURPBYAF.js?v=2725bec9:19224
workLoopSync @ chunk-IURPBYAF.js?v=2725bec9:19163
renderRootSync @ chunk-IURPBYAF.js?v=2725bec9:19142
recoverFromConcurrentError @ chunk-IURPBYAF.js?v=2725bec9:18762
performConcurrentWorkOnRoot @ chunk-IURPBYAF.js?v=2725bec9:18710
workLoop @ chunk-IURPBYAF.js?v=2725bec9:195
flushWork @ chunk-IURPBYAF.js?v=2725bec9:174
performWorkUntilDeadline @ chunk-IURPBYAF.js?v=2725bec9:382
Show 19 more frames
Show lessUnderstand this error
chunk-IURPBYAF.js?v=2725bec9:14050 The above error occurred in the <Routes> component:

    at Routes (http://localhost:5174/node_modules/.vite/deps/chunk-2NKYRYXZ.js?v=2725bec9:4149:5)
    at Index

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ chunk-IURPBYAF.js?v=2725bec9:14050
update.callback @ chunk-IURPBYAF.js?v=2725bec9:14070
callCallback @ chunk-IURPBYAF.js?v=2725bec9:11266
commitUpdateQueue @ chunk-IURPBYAF.js?v=2725bec9:11283
commitLayoutEffectOnFiber @ chunk-IURPBYAF.js?v=2725bec9:17113
commitLayoutMountEffects_complete @ chunk-IURPBYAF.js?v=2725bec9:18006
commitLayoutEffects_begin @ chunk-IURPBYAF.js?v=2725bec9:17995
commitLayoutEffects @ chunk-IURPBYAF.js?v=2725bec9:17946
commitRootImpl @ chunk-IURPBYAF.js?v=2725bec9:19379
commitRoot @ chunk-IURPBYAF.js?v=2725bec9:19303
finishConcurrentRender @ chunk-IURPBYAF.js?v=2725bec9:18786
performConcurrentWorkOnRoot @ chunk-IURPBYAF.js?v=2725bec9:18744
workLoop @ chunk-IURPBYAF.js?v=2725bec9:195
flushWork @ chunk-IURPBYAF.js?v=2725bec9:174
performWorkUntilDeadline @ chunk-IURPBYAF.js?v=2725bec9:382
Show 15 more frames
Show lessUnderstand this error
chunk-IURPBYAF.js?v=2725bec9:14778 Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
    at updateHostRoot (chunk-IURPBYAF.js?v=2725bec9:14778:65)
    at beginWork (chunk-IURPBYAF.js?v=2725bec9:15951:22)
    at beginWork$1 (chunk-IURPBYAF.js?v=2725bec9:19779:22)
    at performUnitOfWork (chunk-IURPBYAF.js?v=2725bec9:19224:20)
    at workLoopSync (chunk-IURPBYAF.js?v=2725bec9:19163:13)
    at renderRootSync (chunk-IURPBYAF.js?v=2725bec9:19142:15)
    at recoverFromConcurrentError (chunk-IURPBYAF.js?v=2725bec9:18762:28)
    at performConcurrentWorkOnRoot (chunk-IURPBYAF.js?v=2725bec9:18710:30)
    at workLoop (chunk-IURPBYAF.js?v=2725bec9:195:42)
    at flushWork (chunk-IURPBYAF.js?v=2725bec9:174:22)
updateHostRoot @ chunk-IURPBYAF.js?v=2725bec9:14778
beginWork @ chunk-IURPBYAF.js?v=2725bec9:15951
beginWork$1 @ chunk-IURPBYAF.js?v=2725bec9:19779
performUnitOfWork @ chunk-IURPBYAF.js?v=2725bec9:19224
workLoopSync @ chunk-IURPBYAF.js?v=2725bec9:19163
renderRootSync @ chunk-IURPBYAF.js?v=2725bec9:19142
recoverFromConcurrentError @ chunk-IURPBYAF.js?v=2725bec9:18762
performConcurrentWorkOnRoot @ chunk-IURPBYAF.js?v=2725bec9:18710
workLoop @ chunk-IURPBYAF.js?v=2725bec9:195
flushWork @ chunk-IURPBYAF.js?v=2725bec9:174
performWorkUntilDeadline @ chunk-IURPBYAF.js?v=2725bec9:382
Show 11 more frames
Show lessUnderstand this error
chunk-IURPBYAF.js?v=2725bec9:19439 Uncaught Error: useRoutes() may be used only in the context of a <Router> component.
    at invariant (chunk-2NKYRYXZ.js?v=2725bec9:200:11)
    at useRoutesImpl (chunk-2NKYRYXZ.js?v=2725bec9:3495:34)
    at useRoutes (chunk-2NKYRYXZ.js?v=2725bec9:3492:10)
    at Routes (chunk-2NKYRYXZ.js?v=2725bec9:4152:10)
    at renderWithHooks (chunk-IURPBYAF.js?v=2725bec9:11566:26)
    at mountIndeterminateComponent (chunk-IURPBYAF.js?v=2725bec9:14944:21)
    at beginWork (chunk-IURPBYAF.js?v=2725bec9:15932:22)
    at beginWork$1 (chunk-IURPBYAF.js?v=2725bec9:19779:22)
    at performUnitOfWork (chunk-IURPBYAF.js?v=2725bec9:19224:20)
    at workLoopSync (chunk-IURPBYAF.js?v=2725bec9:19163:13)
invariant @ chunk-2NKYRYXZ.js?v=2725bec9:200
useRoutesImpl @ chunk-2NKYRYXZ.js?v=2725bec9:3495
useRoutes @ chunk-2NKYRYXZ.js?v=2725bec9:3492
Routes @ chunk-2NKYRYXZ.js?v=2725bec9:4152
renderWithHooks @ chunk-IURPBYAF.js?v=2725bec9:11566
mountIndeterminateComponent @ chunk-IURPBYAF.js?v=2725bec9:14944
beginWork @ chunk-IURPBYAF.js?v=2725bec9:15932
beginWork$1 @ chunk-IURPBYAF.js?v=2725bec9:19779
performUnitOfWork @ chunk-IURPBYAF.js?v=2725bec9:19224
workLoopSync @ chunk-IURPBYAF.js?v=2725bec9:19163
renderRootSync @ chunk-IURPBYAF.js?v=2725bec9:19142
recoverFromConcurrentError @ chunk-IURPBYAF.js?v=2725bec9:18762
performConcurrentWorkOnRoot @ chunk-IURPBYAF.js?v=2725bec9:18710
workLoop @ chunk-IURPBYAF.js?v=2725bec9:195
flushWork @ chunk-IURPBYAF.js?v=2725bec9:174
performWorkUntilDeadline @ chunk-IURPBYAF.js?v=2725bec9:382
Show 16 more frames
Show lessUnderstand this error
reactjs react-router react-router-dom server-side-rendering vite-reactjs
1个回答
0
投票

错误原因是入口服务器需要静态路由器https://v5.reactrouter.com/web/api/StaticRouter 入口客户端需要 BrowserRouter 但需要在自己的组件上调用并使用，不能在 index.jsx 上使用，所以看起来像这样

index.jsx

import React from 'react'
import { Routes, Route, createBrowserRouter, useRoutes } from 'react-        router-dom'
import { NotFound } from './pages/NotFound/NotFound'
import { ContactUs } from './pages/ContactUs/ContactUs'
import { HomePage } from './pages/HomePage/HomePage'
import { AboutUs } from './pages/AboutUs/AboutUs'
import App from './App'

export const Index = () => {
    return (
        <>
            <Routes>
                <Route path='/' element={<App/>}/>
                <Route index element={<HomePage/>} />
                <Route path="/about-us" element={<AboutUs/>} />
                <Route path='/contact-us' element={<ContactUs/>}/>
                <Route path="*" element={<NotFound />} />
            </Routes>
        </>
    )
}

entry-client.jsx

//import './index.css'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Index } from './index'
import { BrowserRouter } from 'react-router-dom'

ReactDOM.hydrateRoot(
  document.getElementById('root'),
  <React.StrictMode>
    <BrowserRouter>
      <Index />
    </BrowserRouter>
  </React.StrictMode>
)

入口服务器.jsx

import React from 'react'
import ReactDOMServer from 'react-dom/server'
import App from './App';
import { StaticRouter } from 'react-router-dom/server'
import { Index } from '.';

export function render(url) {

  const html = ReactDOMServer.renderToString(
    <React.StrictMode>
      <StaticRouter location={url}>
        <Index />
      </StaticRouter>
    </React.StrictMode>
  )
  return { html }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.