不变式失败：您不应在 <Router> 之外使用 <withRouter(App) />答案

【问题标题】：Invariant failed: You should not use <withRouter(App) /> outside a <Router>不变式失败：您不应在 <Router> 之外使用 <withRouter(App) />
【发布时间】：2020-09-21 13:55:39
【问题描述】：

我正在尝试在我的 React 应用程序中实现服务器端渲染。在 server.js 中，我只是在监听任何路由 (/*) 并使用 react 服务器生成一个字符串并将其发送回。

但是“withRouter”在抱怨，因为它认为它不在路由器内部。但它显然是。这很奇怪。

client/src/App.js

class App extends Component {
    render() {
        return (<div>Hello</div>)
    }
}
export default withRouter(App)

服务器/index.js

const content = ReactDOMServer.renderToString(
    <Provider store={store}>
        <StaticRouter location={location} context={context}>
            <App/>
        </StaticRouter>
    </Provider>
);

Error: Invariant failed: You should not use <withRouter(App) /> outside a <Router>
    at invariant (webpack-internal:///./client/node_modules/tiny-invariant/dist/tiny-invariant.esm.js:11:11)
    at Object.eval [as children] (webpack-internal:///./client/node_modules/react-router/esm/react-router.js:729:88)
    at ReactDOMServerRenderer.render (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:3635:55)
    at ReactDOMServerRenderer.read (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)
    at Object.renderToString (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)
    at _callee2$ (webpack-internal:///./server/index.js:137:38)
    at tryCatch (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:45:40)
    at Generator.invoke [as _invoke] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:274:22)
    at Generator.prototype.<computed> [as next] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:97:21)
    at asyncGeneratorStep (webpack-internal:///./server/index.js:7:103)

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

问题是对StaticRouter 的引用必须完全相同。

所以解决方案是对（客户端和服务器）都使用相同的StaticRouter 导出。本质上，在服务器代码中做：

const { StaticRouter } = require('../client/node_modules/react-router-dom');

希望这对某人有所帮助。

【讨论】：