attempt2.js

import React, { Component } from 'react';
import {
  HashRouter,
  Route,
  Link,
  Switch,
} from 'react-router-dom';

import './App.css';


var Header = function () {
  return (
    <div>Header</div>
  );
};


var HomePage = function (props) {
  // Get just the first directory of the url
  var split = props.match.url.split(`/`),
      // The first one is always an empty string
      first = split[1],
      url   = first;
console.log(props);
  // if (first.length > 0) {
  //   url = `/` + first;
  // }

  return (
    <div>
      Home Page
      <br/>
      <Link to = { `/page1` }>Page 1</Link>
    </div>
  );
};


var Page1 = function (props) {
  // How do I optionally retain a path to `/dev` here
  // more cleanly/flexibly? Like in `<HomePage>`.

  // var url     = match.url,
  //     linkUrl = `/`;
  // if (/dev/.test(url)) {
  //   linkUrl = `/dev`;
  // }

  console.log(props);

  return (
    <div>
      Page 1
      <br/>
      <Link to = { '/' }>Home</Link>
    </div>
  );
};


var Routes = function ({ match }) {
  // console.log(match.url);
  // Tried without asterix and also with a question mark and it didn't get me defined params either
  // Best I can get is an `undefined` param with a key of `0`
  return (
    <div>
      <HashRouter>
        <div>
          <Route
            path = { match.url }
            component={ (props) => {
              return (
                <Header {...props} />);
            } } />
          <Switch>
            <Route
              path = { `/(:root/)*page1` }
              component={ (props) => {
                return (
                  <Page1 {...props} />);
              } } />
            <Route
              path = { '/(:root)*' }
              component={ (props) => {
                return (
                  <HomePage {...props} />);
              } } />
          </Switch>
        </div>
      </HashRouter>
    </div>
  );

};  // End <Routes>


var Dev = function ( props ) {

  console.log(props);

  return (
    <div style={{color: `red`}}>
      <Routes {...props}/>
      <div>
        Devving
      </div>
    </div>
  );
}


class App extends Component {
  render() {
    return (
      <div className="App">
        <HashRouter>
          <Switch>
            <Route
              path = { `/dev` }
              component={ Dev } />
            <Route
              path = { `/` }
              component={ Routes } />
          </Switch>
        </HashRouter>
      </div>
    );
  }
}

export default App;

flexible-routes.js

import React, { Component } from 'react';
import {
  HashRouter,
  Route,
  Link,
  Switch,
} from 'react-router-dom';

import './App.css';


var Header = function () {
  return (
    <div>Header</div>
  );
};


var HomePage = function ({ match }) {
  // Get just the first directory of the url
  var split = match.url.split(`/`),
      // The first one is always an empty string
      first = split[1],
      url   = first;

  if (first.length > 0) {
    url = `/` + first;
  }

  return (
    <div>
      Home Page
      <br/>
      <Link to = { url + `/page1` }>Page 1</Link>
    </div>
  );
};


var Page1 = function ({ match }) {
  // How do I optionally retain a path to `/dev` here
  // more cleanly/flexibly? Like in `<HomePage>`.

  var url     = match.url,
      linkUrl = `/`;
  if (/dev/.test(url)) {
    linkUrl = `/dev`;
  }

  return (
    <div>
      Page 1
      <br/>
      <Link to = { linkUrl }>Home</Link>
    </div>
  );
};


var Routes = function ({ match }) {
  // console.log(match.url);
  return (
    <div>
      <HashRouter>
        <div>
          <Route
            path = { match.url }
            component={ (props) => {
              return (
                <Header {...props} />);
            } } />
          <Switch>
            <Route
              path = { match.url + `/page1` }
              component={ (props) => {
                return (
                  <Page1 {...props} />);
              } } />
            <Route
              path = { `/` }
              component={ (props) => {
                return (
                  <HomePage {...props} />);
              } } />
          </Switch>
        </div>
      </HashRouter>
    </div>
  );

};  // End <Routes>


var Dev = function ( props ) {
  return (
    <div style={{color: `red`}}>
      <Routes {...props}/>
      <div>
        Devving
      </div>
    </div>
  );
}


class App extends Component {
  render() {
    return (
      <div className="App">
        <HashRouter>
          <Switch>
            <Route
              path = { `/dev` }
              component={ Dev } />
            <Route
              path = { `/` }
              component={ Routes } />
          </Switch>
        </HashRouter>
      </div>
    );
  }
}

export default App;