Question

我的服务器正在使用renderToString()呈现基于路由器的应用程序。

// isomorphic route
app.get('/*', (req, res) => {

  let history = useQueries(createMemoryHistory)();
  // let store = configureStore();
  let routes = createRoutes(history);
  let location = history.createLocation(req.url);

  match({routes, location}, (error, redirectLocation, renderProps) => {
    if (error) {
      res.status(500).send(error.message)
    } else if (redirectLocation) {
      res.redirect(302, redirectLocation.pathname + redirectLocation.search)
    } else if (renderProps) {
      let content = renderToString(<RouterContext {...renderProps} />);
      res.render('main', {content: content});
    } else {
      res.status(404).send('Not found')
    }
  });
});

createRoutes文件

import React from 'react'
import { Router, Route, IndexRoute } from 'react-router'
import HomeView from './views/HomeView'
import VideoView from './views/VideoView'

export default (history) => {
  return (
    <Router history={history}>
      <Route path="/" component={HomeView}></Route>
      <Route path="/v/:id" component={VideoView}></Route>
    </Router>
  )
}

由于我在服务器上使用RouterContext，我的问题是如何将客户端连接到允许反应自己的事件可以在客户端再次访问和“触发”

import React from 'react';
import ReactDom from 'react-dom';
import { Router, hashHistory} from 'react-router';  
import createRoutes from '../2-shared/routes';

ReactDom.render(// RouterContext??, document.getElementById('app'));

我不确定这里要做什么，使客户端能够从componentDidMount()这样的组件中侦听生命周期事件，目前我的console.log都将进入服务器，并且客户端没有听到任何消息。

与react componentDidMount not firing

有类似的问题

由于

Answer 1

鉴于您正在开发 isomorphic 应用程序，您将在客户端和服务器端加载JS。客户端将重新呈现应用程序，如果一切正常，甚至不会触及DOM，因为没有更新。但是，它会正确连接所有事件侦听器。

componentDidMount永远不会在服务器端触发，因为它从未真正安装过。但是，componentWillMount将在服务器上正常启动。

React同构客户端DOM？

1 个答案: