React Router v5 - element under nested route not displaying-CodePudding

I am working on a project that uses React Router v5. My component, HeatMapContainer, is rendered from within a Switch like this:

          <Switch>
            <Route path="/" exact component={LandingPage} />
            <Route path="/table" component={TablePage} />
            <Route path="/heatmap" component={HeatMapContainer} />
            <Route component={NotFoundPage} />
          </Switch>

I am attempting to create a nested Switch inside HeatMapContainer that will render different components based on the nested route. Inside HeatMapContainer I have this div:

      <div style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
        HEAT MAP CONTAINER
        <Link to="/heatmap/all">All</Link>
        <Route path="/heatmap/all" element={<AllOfficesRoute />} />
      </div>

Here is the AllOfficesRoute component I want to see upon clicking the Link:

function AllOfficesRoute() {
  return (
    <div className="all-offices-route">
      ALL OFFICES
    </div>
  );
}

Currently, the Link works and pushes the right path [ /heatmap/all ] onto history, but no component shows up. I started trying absolute paths because I distrusted relative paths, but even absolute paths don't seem to work here. Any help understanding what I'm missing would be appreciated.

CodePudding user response：

You appear to be mixing RRDv5 and RRDv6 component API/syntax. If using RRDv5 the descendent route rendered by HeatMapContainer should render content on the component prop (or render or children function props) instead of a non-existent element prop.

<Switch>
  <Route path="/table" component={TablePage} />
  <Route path="/heatmap" component={HeatMapContainer} />
  <Route path="/" exact component={LandingPage} />
  <Route component={NotFoundPage} />
</Switch>

HeatMapContainer

<div style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
  HEAT MAP CONTAINER
  <Link to="/heatmap/all">All</Link>
  <Route path="/heatmap/all" component={AllOfficesRoute} />
</div>