Question

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

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

client / src / App.js

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

server / 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)

Answer 1

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

因此解决方案是对客户端和服务器都使用SAME StaticRouter导出。本质上，在服务器代码中进行操作：

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

希望这对某人有帮助。

不变式失败：您不应在<Router>外使用<withRouter（App）/>

1 个答案: