Question

我正在使用的堆栈包括node，express，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问题描述了类似的错误（one和two），遗憾的是，提议的解决方案对我没有用。关于可能对我造成什么影响的任何建议？

Answer 1

我发现这实际上与DOM验证错误有关，这是因为在react-bootstrap的<Link>中有react-router-dom的<NavItem>。实际上，应用程序试图呈现以下内容：

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

当然，嵌套锚标记是无效标记。请参阅此处的问题以获取更多详细信息以及解决问题的一些建议方法：React-Bootstrap link item in a navitem

接收＆＃34;未捕获错误：无法找到ID为15＆＃34的元素;请求同构应用程序的非索引页面时

1 个答案: