How to use React Router in SSR vite

[msdharani1]

I try to add a react router for my pages. But some error will occur. So how to use this?

Code:

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Pages/Home'; // Import the Home component

const App = () => {
return (


<Route
path="/"
element={
//here I add my home component code. But here now visible
} />


);
};

export default App;

Error:

'PS E:\Learn - React\MSD-Website\ssr-msd> npm run dev

[email protected] dev
node server

Server started at http://localhost:5173
ReferenceError: document is not defined
at getUrlBasedHistory (E:\Learn - React\MSD-Website\ssr-msd\node_modules@remix-run\router\dist\router.cjs.js:411:14)
at Object.createBrowserHistory (E:\Learn - React\MSD-Website\ssr-msd\node_modules@remix-run\router\dist\router.cjs.js:234:10)
at BrowserRouter (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-router-dom\dist\umd\react-router-dom.development.js:701:35)
at renderWithHooks (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:5724:16)
at renderIndeterminateComponent (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:5798:15)
at renderElement (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6023:7)
at renderNodeDestructiveImpl (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6181:11)
at renderNodeDestructive (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6153:14)
at renderIndeterminateComponent (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:5852:7)
at renderElement (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6023:7)
at renderNodeDestructiveImpl (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6181:11)
at renderNodeDestructive (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6153:14)
at renderElement (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6048:9)
at renderNodeDestructiveImpl (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6181:11)
at renderNodeDestructive (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6153:14)
at retryTask (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6605:5)
at performWork (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6653:7)
at Immediate._onImmediate (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6980:12)
at process.processImmediate (node:internal/timers:483:21)
ReferenceError: document is not defined
at getUrlBasedHistory (E:\Learn - React\MSD-Website\ssr-msd\node_modules@remix-run\router\dist\router.cjs.js:411:14)
at Object.createBrowserHistory (E:\Learn - React\MSD-Website\ssr-msd\node_modules@remix-run\router\dist\router.cjs.js:234:10)
at BrowserRouter (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-router-dom\dist\umd\react-router-dom.development.js:701:35)
at renderWithHooks (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:5724:16)
at renderIndeterminateComponent (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:5798:15)
at renderElement (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6023:7)
at renderNodeDestructiveImpl (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6181:11)
at renderNodeDestructive (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6153:14)
at renderIndeterminateComponent (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:5852:7)
at renderElement (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6023:7)
at renderNodeDestructiveImpl (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6181:11)
at renderNodeDestructive (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6153:14)
at renderElement (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6048:9)
at renderNodeDestructiveImpl (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6181:11)
at renderNodeDestructive (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6153:14)
at retryTask (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6605:5)
at performWork (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6653:7)
at Immediate._onImmediate (E:\Learn - React\MSD-Website\ssr-msd\node_modules\react-dom\cjs\react-dom-server.node.development.js:6980:12)
at process.processImmediate (node:internal/timers:483:21)
'

And the localhost:5173 say something went wrong....

How to fix this issue?