问题描述
当我切换到SSR时，它有问题。 似乎设置完成了，因为终端显示 '纱线运行 v1.22.10 $ 节点服务器/index.js 应用在 8000' 上启动
但是当我输入网址时：http://localhost:8000/ 它显示了错误，我猜 React-Router-dom 有一些问题。
src/index.js
import React,{ useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import ReactDOM from 'react-dom';
import { browserRouter,StaticRouter,useLocation } from 'react-router-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
export default function ScrollToTop() {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0,0);
},[pathname]);
return null;
}
ReactDOM.hydrate(
<browserRouter>
<ScrollToTop />
<App />
</browserRouter>,document.getElementById('root'),);
reportWebVitals();
server/server.js
import express from 'express';
import fs from 'fs';
import path from 'path';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import ThemeProvider from '../src/ThemeProvider';
const PORT = 8000;
const app = express();
app.use('^/$',(req,res,next) => {
fs.readFile(path.resolve('./build/index.html'),'utf-8',(err,data) => {
if (err) {
console.log('error');
return res.status(500).send('Some error happened');
}
return res.send(
data.replace(
'<div id="root"></div>',`<div id="root">${ReactDOMServer.renderToString(
<ThemeProvider />
)}</div>`
)
);
});
});
app.use(express.static(path.resolve(__dirname,'..','build')));
app.listen(PORT,() => {
console.log(`App launched on ${PORT}`);
});
服务器/index.js
server/index.js
require('ignore-styles');
require('@babel/register')({
ignore: [/(node_module)/],presets: ['@babel/preset-env','@babel/preset-react'],});
require('./server');
ThemeProvider.js
ThemeProvider.js
import React,{ useEffect,useRef,useState } from 'react';
import { MdDehaze } from 'react-icons/md';
import { MdClose } from 'react-icons/md';
import styled,{ ThemeProvider } from 'styled-components';
import './nav.scss';
import theme from './theme';
import Main from './Main';
import Footer from './Footer';
import Partners from './Partners';
import DoutechIs from './DoutechIs';
import News from './News/index';
import History from './History';
import Organization from './Organization';
import Overview from './Overview';
import { Link,Route,Switch,browserRouter as Router } from 'react-router-dom';
import Business from './Business';
import Contactus from './Contactus';
const Body = styled.div`
width: 100%;
`;
const App = () => {
function Submenu1() {
return (
<ul className="nav__submenu">
<li className="nav__submenu-item ">
<Link to="/overview">Overview</Link>
</li>
<li className="nav__submenu-item ">
<Link to="/organization">Organization</Link>
</li>
<li className="nav__submenu-item ">
<Link to="/history">History</Link>
</li>
</ul>
);
}
function Submenu2() {
return (
<ul className="nav__submenu">
<li className="nav__submenu-item ">
<Link to="/News">News</Link>
</li>
<li className="nav__submenu-item ">
<Link to="/partners">Partners</Link>
</li>
</ul>
);
}
const [isActive,setIsActive] = useState(false);
const [showMenu,setShowMenu] = useState();
const onClick = () => setShowMenu(!showMenu);
useEffect(() => {
const menuClickEvent = (e) => {};
if (showMenu) {
window.addEventListener('click',menuClickEvent);
}
},[isActive]);
return (
<ThemeProvider theme={theme}>
<Router>
<Div>
<div className="wrap">
<Link to="/" style={{ padding: ' 0 5rem' }}>
<img
src="../img/logo.png"
className="logo"
alt="logo"
style={{ cursor: 'pointer' }}
/>
</Link>
<div className="pcBtn">
<ul style={{ display: 'flex',margin: '0px' }}>
<li className="nav__menu-item">
Doutech is
<Submenu1 />
</li>
<li className="nav__menu-item">
<a href="/business">Business</a>
</li>
<li className="nav__menu-item">
News & Partners
<Submenu2 />
</li>
<li className="nav__menu-item">
<a href="/contactus">Contact us</a>
</li>
</ul>
</div>
<div>
<button className="mobileBtn" onClick={onClick}>
<MdDehaze />
</button>
<nav
className={`mobileMenu ${
showMenu ? 'showMenu' : 'notShowMenu'
}`}
>
<span className="xBtn" onClick={onClick}>
<MdClose />
</span>
<ul className="category_list">
<span>Doutech is</span>
<li>
<Link to="/overview">Overview</Link>
</li>
<li>
<Link to="/organization">
Organization
</Link>
</li>
<li>
<Link to="/history">History</Link>
</li>
<br />
<span>Business</span>
<li>
<a href="/business">Business</a>
</li>
<br />
<span>News and Partners</span>
<li>
<Link to="/News">News</Link>
</li>
<li>
<Link to="/partners">Partners</Link>
</li>
<br />
<span>Contact Us</span>
<li>
<a href="/contactus">Contact us</a>
</li>
</ul>
</nav>
</div>
<Body>
<Switch>
<Route exact path="/" component={Main} />
<Route
exact
path="/DoutechIs"
component={DoutechIs}
/>
<Route
exact
path="/Partners"
component={Partners}
/>
<Route exact path="/history" component={History} />
<Route path="/News" component={News} />
<Route
exact
path="/overview"
component={Overview}
/>
<Route
exact
path="/organization"
component={Organization}
/>
<Route
exact
path="/contactus"
component={Contactus}
/>
<Route
exact
path="/business"
component={Business}
/>
</Switch>
</Body>
<Footer />
</Div>
</Router>
</ThemeProvider>
);
};
export default App;
package.json
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）