React（同构）链接未在客户端渲染路由答案

【问题标题】：React (Isomorphic) Link Not Rendering Route on Client SideReact（同构）链接未在客户端渲染路由
【发布时间】：2017-04-17 01:57:57
【问题描述】：

所以，我已经为此苦苦挣扎了好几天。

工作原理：应用程序在服务器端加载得很好。 routes/index.jsx （这是我的服务器端路由文件）加载页面就好了。 console.log('News'); 在客户端 JavaScript 控制台和服务器节点上的页面加载日志中都显示了 News 的日志。我最初可以加载任何页面。

问题：页面加载后，我单击标题中的链接，URL 栏中的地址发生变化，但 UI 没有更新，如果我没有得到 console.log('Home')导航到主页，反之亦然，如果我导航到 News，我不会在客户端或服务器上看到 console.log('News');。

我有以下文件。

Routes/Index.jsx - 服务器端渲染

var router = require('express').Router();
var React = require('react');
var ReactDOMServer = require('react-dom/server');
var StaticRouter = require('react-router-dom').StaticRouter;
var Redux = require('redux');
var Provider = require('react-redux').Provider;
var App = require('../views/app.jsx');

function reducer(state) { return state; }

router.get('*', function(req, res) {
  var initialState = { title: 'Home' };
  const store = Redux.createStore(reducer, initialState);
  var context = {};

  var html = ReactDOMServer.renderToString(
      <Provider store={store}>
        <StaticRouter location={req.url} context={context}>
          {require('../views/app.jsx')}
        </StaticRouter>
      </Provider>
    );

  var windowprops = store.getState();
  windowprops = JSON.stringify(windowprops).replace(/</g, '\\u003c');
  var frame = '<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="/css/layout.css" /><title>'+store.getState().title+' | Lunar Realm</title></head><body><div id="root">'+html+'</div><script>window.PROPS = '+windowprops+'</script><script src="/bundle.js"></script></body></html>';

  if(context.status >= 400) {
    res.status(context.status).send(frame);
  } else if (context.url) {
    res.redirect(context.status, context.url);
  } else {
    res.send(frame);
  }
});
module.exports = router;

views/app.jsx

var React = require('react');
var ReactRouter = require('react-router-dom');
var Route = ReactRouter.Route;
var Layout = require('../views/Layout.jsx');
var Redirect = ReactRouter.Redirect;
var Switch = ReactRouter.Switch;

module.exports = (
    <Layout>
      <Switch>
        <Route exact path='/' component={require('./Index.jsx')} />
        <Route exact path='/news' component={require('./News.jsx')} />
      </Switch>
    </Layout>
);

Client.JS - 用于 WebPack

var ReactDOM = require('react-dom');
var React = require('react');
var Routes = require('./routes/routes.jsx');
var Redux = require('redux');
var Provider = require('react-redux').Provider;

function reducer(state) { return state; }

var store = Redux.createStore(reducer, window.PROPS);

ReactDOM.render(
    <Provider store={store}>
        {Routes}
    </Provider>, document.getElementById('root')
);

Routes.JSX - 用于前端路由

var React = require('react');
var ReactRouter = require('react-router-dom');
var BrowserRouter = ReactRouter.BrowserRouter;
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Redirect = ReactRouter.Redirect;
var Switch = ReactRouter.Switch;
var Layout = require('../views/Layout.jsx');

import createHistory from 'history/createBrowserHistory';
var history = createHistory();

module.exports = (
  <BrowserRouter>
    <Layout>
      <Switch>
        <Route exact path="/" component={require('../views/Index.jsx')} />
        <Route exact path='/news' component={require('../views/News.jsx')} />
        <Route component={require('../views/404.jsx')} />
      </Switch>
    </Layout>
  </BrowserRouter>
);

views/News.jsx - 布局的子级

var React = require('react');

var News = React.createClass({
  render: function(){
    console.log('news');
    return(
      <div id="canvas-section-news" className="canvas-section">
        News
      </div>
    );
  }
});

module.exports = News;

谁能帮我弄清楚为什么我的用户界面没有更新？我应该注意，我的节点日志和浏览器的 javascript 控制台中都没有出现任何错误。

我的 package.json 中的依赖项

"dependencies": {
    "babel-loader": "^6.4.1",
    "babel-plugin-transform-class-properties": "^6.23.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-0": "^6.22.0",
    "babel-register": "^6.24.0",
    "express": "^4.15.2",
    "history": "^4.6.1",
    "mongoose": "*",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.3",
    "react-router": "^4.0.0",
    "react-router-dom": "^4.0.0",
    "redux": "^3.6.0",
    "webpack": "^2.3.3"
  }

【问题讨论】：

标签： javascript node.js reactjs react-router isomorphic-javascript

【解决方案1】：

好的，我想通了。我使用 React Connect() 函数的方式存在问题。确保您正确使用它！

【讨论】：