Pass additional props through hookrouter

Question

I'm trying to pass additional data through to a component using hookrouter. I'm not sure what I'm doing wrong. I get the error Functions are not valid as React child. This may happen if you return a Component instead of <Component /> from render.

Path: Routes

const routes = {
  "/modules/unit/:id": ({ id }) => (page_url) => (
    <UnitPage unit_id={id} page_url={page_url} />
  )
};

Path: Link within page

<A href={`modules/unit/${id}`} page_url={page_url}>
  Unit link
</A>

** UPDATE **

Path UnitPage.jsx

class UnitPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidUpdate() {
    console.log("props", this.props);
  }

  render() {
    const { id, page_url } = this.props;
    return (
      <div>
        <p>{id}</p>
        <p>{page_url}</p>
      </div>
    );
  }
}