Routing

You can use React Router to render links and routes to add interactivity to your pages.

Here is an example of how you might render some tabs to allow the user to switch between a normal property map and streetview on the property show page:

In this slightly contrived example we are rendering the tabs and the map into separate adjacent <div> elements. Normally you would render a single React component containing both the tabs and the routes, but we wanted to demonstrate how this could work if these elements needed to be rendered in different parts of the page.

tip

As long as you wrap your top-level component in the withHomeflowState() HOC before rendering, it will automatically be wrapped in a HashRouter from React Router, so this can be omitted.

In your HTML:

<div id="property-map-tabs"></div>

<div id="property-map"></div>

In your JS:

import React from 'react';
import ReactDOM from 'react-dom';
import {
  Switch,
  Route,
  NavLink,
} from 'react-router-dom';

import { withHomeflowState } from 'homeflowjs';
import { PropertyMap, PropertyStreetview } from 'homeflowjs/properties';

const PropertyMapTabs = () => (
  <ul className="tabs">
    <li>
      <NavLink
        activeClassName="active"
        to="/"
        exact
      >
        Map
      </NavLink>
    </li>

    <li>
      <NavLink
        activeClassName="active"
        to="/streetview"
        exact
      >
        Streetview
      </NavLink>
    </li>
  </ul>
);

const CustomPropertyMap = () => (
  <Switch>
    <Route path="/streetview">
      <PropertyStreetview className="property-streetview" />
    </Route>

    <Route path="/">
      <PropertyMap
        custom="simple_bw"
      />
    </Route>
  </Switch>
);

window.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    withHomeflowState(PropertyMapTabs),
    document.getElementById('property-map-tabs'),
  );

  ReactDOM.render(
    withHomeflowState(CustomPropertyMap),
    document.getElementById('property-map'),
  );
});

The value passed for the activeClassName prop on each NavLink will be added as a class to the tab only when the given route is active. This allows you to style active tabs differently.