Guide.js

import React from "react";
import PropTypes from "prop-types";
import { Redirect, Route } from "react-router-dom";
import { Block } from "jsxstyle";

import ScrollToDoc from "./ScrollToDoc.js";
import MarkdownViewer from "./MarkdownViewer.js";

// almost identical to `API`, but I'm lazy rn
export default function Guide({ match, data }) {
  const {
    params: { mod, header: headerParam, environment }
  } = match;
  const doc = data.guides.find(doc => mod === doc.title.slug);
  const header =
    doc && headerParam ? doc.headers.find(h => h.slug === headerParam) : null;
  return !doc ? (
    <Redirect to={`/${environment}`} />
  ) : (
    <Block className="api-doc-wrapper" fontSize="80%">
      <Block className="api-doc">
        <ScrollToDoc doc={doc} header={header} />
        <MarkdownViewer html={doc.markup} />
      </Block>
      <Route
        path={`${match.path}/:header`}
        render={({
          match: {
            params: { header: slug }
          }
        }) => {
          const header = doc.headers.find(h => h.slug === slug);
          return header ? (
            <ScrollToDoc doc={doc} header={header} />
          ) : (
            <Redirect to={`/${environment}/guides/${mod}`} />
          );
        }}
      />
    </Block>
  );
}

Guide.propTypes = {
  match: PropTypes.object,
  data: PropTypes.object
};