Реагировать на загрузку маршрутизатором неправильного компонента при использовании SSR - PullRequest
Новая
       21

Реагировать на загрузку маршрутизатором неправильного компонента при использовании SSR

0 голосов
/ 19 октября 2018

Я пытаюсь инициализировать SSR в моем метеорном приложении, которое использует React.Когда я загружаю свой маршрут, единственной загружаемой страницей является домашняя страница.Если перейти к /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);
...