Question

SSR /客户端反应路由器Dom的“ Switch”因“ Invariant Failed”而中断。我相信它说与“路由器”外部不允许使用Switch有关，事实并非如此。

下面是最小项目链接，可以更轻松地查看项目。我在下面列出了主要文件

1：服务器端渲染端点

// EXPRESS ROUTER
const express = require("express");
const aRouter = express.Router();

// REACT UTILITIES
import React from "react";
import { renderToNodeStream } from "react-dom/server";
import { StaticRouter } from "react-router-dom";
import { createMemoryHistory } from "history";
import Loadable from "react-loadable";

// REDUX UTILITIES
import { init } from "../src/module/store";
import { Provider } from "react-redux";

// CUSTOM COMPONENTS
import App from "../src/App";

// UTILITIES
import fs from "fs-extra";
import renderUtils from "../utils/renderUtils";

// ASSETS
import { initState } from "../assets/store/init";

aRouter.get(["/", "/home"], async function (req, res) {

  console.log("RENDER HOME");

  try {

    // INITIAL WRITE TO CLIENT - START HEAD
    res.setHeader('Content-Type', 'text/html');
    res.write("<!DOCTYPE html>");
    res.write("<html style='scrollbar-width: none;'>");

    let headHTML = await fs.readFile("./public/head.html", "utf-8");
    let scriptsHTML = await fs.readFile("./public/scripts.html", "utf-8");

    res.write(headHTML);
    res.write("<body>");
    res.write(`<div id = "app-container">`);

    // INITALISING STATE
    var initialState = initState();
    initialState.article.articles = {
      "abcde": {
        title: "My First Article",
        body: "This is my first article"
      },
      "fghij": {
        title: "My Second Article",
        body: "This is my second article"
      },
      "klmno": {
        title: "My Third Article",
        body: "This is my third article"
      }
    };
    initialState.article.fetched = true;
    initialState.ui.user = { type: "" };
    initialState.ui.global = {
      team: "Arsenal",
      teamID: 19
    };

    const history = createMemoryHistory({ initialEntries: [req.originalUrl] });
    const store = init(history, initialState);
    
    // THE ISSUE SEEMS TO BE TO DO WITH THIS SERVER SIDE STATIC BROWSER AND THE CLIENT BORWSER ROUTER
    const stream = renderToNodeStream(
      <Provider store = {store}>
        <StaticRouter history = {history} location = {req.originalUrl} context = {{}}>
          <App />
        </StaticRouter>
      </Provider>
    );

    stream.pipe(res, { end: false });
    stream.on("end", renderUtils.onRenderEnd.bind(this, res, store, scriptsHTML));

  } catch (err) { renderUtils.onRenderError.bind(this, res, "RENDER HOME ERROR", err.message); }

});

var self = (module.exports = aRouter);

2：客户索引

// REACT
import React from "react";
import ReactDOM from "react-dom";
import Loadable from "react-loadable";
import { BrowserRouter } from "react-router-dom";
import { createMemoryHistory } from "history";
import { Provider } from "react-redux";

// REDUX
import { init } from "./module/store";

// CREATE STORE
let history = createMemoryHistory();
let store = init(history, window.INITIAL_STATE);

// MAIN APP COMPONENT
import App from "./App";

// MOUNTED STYLES
import "./style/client/index.scss";

const renderApp = () => {
  ReactDOM.hydrate(
    <Provider store = {store}>
      <BrowserRouter history = {history}>
        <App />
      </BrowserRouter>
    </Provider>,
    document.getElementById("app-container")
  );
};

store.subscribe(() => renderApp());

3：APP-客户端

// REACT
import React, { PureComponent } from "react";
import { Switch, Route } from "react-router-dom";
import PropTypes from "prop-types";

// REDUX STORE
import { connect } from "react-redux";
import { getName, getAge, getPosition } from "./module/user/userReducer";
import { getUIElement, setUIElement } from "./module/uiReducer";

// IMPORT CUSTOM COMPONENTS
import Routes from "./Routes";

class App extends PureComponent {

  componentDidMount = () => this.props.setUI("user", "type", "admin");

  render = () => {
    return (
      <div className = "app">
        <span>My App</span>
        <span>Name : {this.props.name}</span>
        <span>Age : {this.props.age}</span>
        <span>Position : {this.props.position}</span>
        <span>Team : {this.props.team}</span>
        <span>Team ID : {this.props.teamID}</span>
        <span>Type : {this.props.type}</span>
        <div>
          <Switch>
            <Route path = "/" component = {MyLocation} />
            <Route path = "/contact" render = {() => (<MyLocation location = "Contact" />)} />
          </Switch>
        </div>
      </div>
    );
  };

};

App.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  position: PropTypes.string.isRequired,
  team: PropTypes.string.isRequired,
  teamID: PropTypes.number.isRequired,
  type: PropTypes.string.isRequired,
  setUI: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  name: getName(state),
  age: getAge(state),
  position: getPosition(state),
  team: getUIElement(state, "global", "team"),
  teamID: getUIElement(state, "global", "teamID"),
  type: getUIElement(state, "user", "type")
});

const mapDispatchToProps = dispatch => ({
  setUI: (component, element, value) => dispatch(setUIElement({ component, element, value }))
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

完整的最小反应应用here

添加开关和路由后，它就中断了。交换机“在浏览器路由器内部”。我已经阅读了说明将相同的React Router Dom发送给客户端的文章，但尝试了这些解释，但它们对我不起作用。

要运行项目，只需运行“ yarn”，“ npm run build”和“ npm start”。该应用只有一页，上面有一些填充文字

问题：切换时中断必需：在Switch上工作已尝试：解释为什么将相同的react-router-dom实例从服务器带到客户端并使用webpack等等的植入物。

还有趣的是，这在Heroku的“生产”中有效，但在本地的“生产”中无效。我认为heroku有一些后备代码可以捕获它。

任何帮助都很棒；

丹尼尔

React SSR客户端React Router Dom交换机“不变失败”

0 个答案: