Question

我正在尝试让SSR与Meteor，React和React Router V4一起使用。在下面的示例中，我没有任何错误，只是出现了一个空白屏幕。我在这里做错了什么？

其他信息：如果我删除了<Router>...</Router>并只是在App文件中放入了<h1>My App</h1>之类的内容，页面将显示“我的应用程序”。

路径：startup/server.js

onPageLoad(sink => {
  const initialState = {
    siteMeta: {
      owner: 'Chris Visser',
      version: '0.3.8',
      publishedAt: new Date('2018-05-10'),
    }
  };

  sink.renderIntoElementById('app', renderToNodeStream(
    <App location={sink.request.url} initialState={initialState}/>
  ));

  // Push EJSON stringified state to the client
  sink.appendToBody(`
    <script id="preloaded-state">
      window.__PRELOADED_STATE__ = ${EJSON.stringify(initialState)} 
    </script>
  `)
});

路径：startup/client.js

// Stringify back the preloaded state into its original EJSON string form. 
// Then use the EJSON parser to parse rich content types
const initialState = EJSON.parse(JSON.stringify(window.__PRELOADED_STATE__));

delete window.__PRELOADED_STATE__; // Remove what we don't need anymore

onPageLoad(async sink => {
  const App = (await import('../ui/App.jsx')).default;
  ReactDOM.hydrate(
    <App initialState={initialState}/>,
    document.getElementById('app')
  );
});

路径：ui/App.jsx

const Index = () => <h1>Home page. index test.</h1>;
const Login = () => <h1>Login</h1>

export default ({ initialState }) => {
    console.log('initialState', initialState);
    return (
        <Router>
            <Switch>
            <Route path="/" exact component={Index} />
            <Route path="/login" exact component={Login} />
            </Switch>
        </Router>
    )
};

带React Router V4的流星SSR

0 个答案: