Question

我正在尝试在使用React的流星应用程序中初始化SSR。当我加载路线时，唯一加载的页面是主页。如果我转到/contact，则会加载主页组件。我以前从未使用过SSR，所以这可能是一个菜鸟问题。我在这里想念什么？

路径：client/main.html

<head></head>

<body>
  <div id="react-root-app"></div>
</body>

路径：server/main.js

import { Meteor } from "meteor/meteor";
import React from "react";
import PropTypes from 'prop-types';
import { onPageLoad } from "meteor/server-render";
import { renderToNodeStream } from "react-dom/server";
import { ServerStyleSheet } from "styled-components"

import App from "/imports/server/app/App";
import Helmet from 'react-helmet';  

onPageLoad(sink => {
  const sheet = new ServerStyleSheet();
  const appJSX = sheet.collectStyles(
    <App location={sink.request.url} />
  );

  const htmlStream = sheet.interleaveWithNodeStream(
    renderToNodeStream(appJSX)
    );

    const helmet = Helmet.renderStatic();
    sink.appendToHead(helmet.meta.toString());
    sink.appendToHead(helmet.title.toString());

    sink.renderIntoElementById("react-root-app", htmlStream);

});

路径：imports/server/app/App.jsx

import { Meteor } from 'meteor/meteor';
import React from "react";
import { Router, Route, Link, Switch } from "react-router-dom";
import { createMemoryHistory } from 'history';

const history = createMemoryHistory();
import PropTypes from 'prop-types';
import { withTracker } from 'meteor/react-meteor-data';

const Contact = () => (
  <div>
    <h2>Contact Us</h2>
  </div>
);
const Home = () => (
  <div>
    <h1>Home</h1>
  </div>
);


const App = (rest) => { 
    return (
      <Router history={history}>
        <Switch>
        <Route exact path="/contact" component={Contact} {...rest} />
        <Route exact path="/" component={Home} {...rest} />
        </Switch>
      </Router>
    );
}

export default withTracker(() => {
  return {

  };
})(App);

使用SSR

0 个答案: