請求同構應用的非索引頁面時，收到“未捕獲的錯誤：無法找到ID為15的元素”

Question

我正在使用的堆棧包括節點，表達，webpack，redux，react-router和react。 我的快遞服務器如下所示：

import Express from 'express';
import { Server } from 'http';
import path from 'path';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { Provider } from 'react-redux';
import { StaticRouter } from 'react-router-dom';
import { applyMiddleware, createStore } from 'redux';
import thunkMiddleware from 'redux-thunk';
import App from './src/App';
import routes from './src/routes';
import reducer from './src/reducer';

const app = new Express();
const server = new Server(app);

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'src'));
app.use(Express.static(path.join(__dirname, 'clients/Sample/bundle')));

const store = createStore(
  reducer,
  {},
  applyMiddleware(thunkMiddleware),
);

app.get('*', (req, res) => {
  const context = {};
  const markup = renderToString(
    <Provider store={store}>
      <StaticRouter location={req.url} context={context}>
        <App routes={routes} />
      </StaticRouter>
    </Provider>,
  );

  return res.render('index', { markup });
});

const port = process.env.PORT || 3000;
const env = process.env.NODE_ENV || 'production';

server.listen(port, (err) => { // eslint-disable-line consistent-return
  if (err) {
    return console.error(err);
  }
  console.info(`Server running on http://localhost:${port} [${env}]`);
});

如果我嘗試直接在http：// localhost：3000 /上訪問該應用程序，則該應用程序將完美運行。 從那里，我可以毫無問題地導航到其他頁面。 但是，如果我嘗試直接在URL中訪問其他頁面之一（例如http：// localhost：3000 / user ），控制台將顯示以下堆棧跟蹤：

Uncaught Error: Unable to find element with ID 15.
    at invariant (vendor.js:1)
    at precacheChildNodes (vendor.js:1)
    at Object.getNodeFromInstance (vendor.js:1)
    at Object.didPutListener (vendor.js:1)
    at Object.putListener (vendor.js:1)
    at Object.putListener (vendor.js:1)
    at CallbackQueue.notifyAll (vendor.js:1)
    at ReactReconcileTransaction.close (vendor.js:1)
    at ReactReconcileTransaction.closeAll (vendor.js:1)
    at ReactReconcileTransaction.perform (vendor.js:1)

然后，這會中斷網站上的導航，並且redux狀態也會更改。 我已將具有此ID的元素標識為從react-router-dom導入的元素。 我確實找到了描述類似錯誤（ 一個和兩個 ）的GitHub問題，盡管可惜的是，提出的解決方案對我來說並不奏效。 關於什么可能導致我的任何建議？

Answer 1

我發現這實際上與DOM驗證錯誤有關，該錯誤是由於react-bootstrap的<NavItem>中包含了react-router-dom的<Link>而導致的。 實際上，該應用程序試圖呈現以下內容：

<a role="button" href="#" data-reactid="14">
  <a href="/user" data-reactid="15">Welcome, User</a>
</a>

當然，嵌套的錨標記是無效的標記。 請參閱此處的問題以獲取更多詳細信息以及解決該問題的一些建議方法： navitem中的React-Bootstrap鏈接項