当我更改为 SSR 时，它有问题。似乎设置完成得很好，因为终端显示'yarn run v1.22.10 $ node server/index.js App 在 8000 上启动'
但是当我输入 url 时：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;
包.json
