How to add a global component (navigation) in Ionic React

Question

I'm trying to add a global navigation/menu bar component in my Ionic React project, like you would do on any website.

So I've created a standard <Nav/> component i React, but it seems like I can only add it into specific pages in my Ionic app, not in my App.tsx file where the Router is set up.

My App.tsx component looks like this:

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route exact path="/" component={Home} />
        ...
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

I want to add my <Nav/> to line 4 right below <IonReactRouter> like I'd normally do in a standard create-react-app project.

But if I do that, the <Nav/> doesn't render and I get no errors.

Is that not possible? Do I need to add <Nav/> to every page in the project?

Julius Julius · Accepted Answer · 2020-11-14T20:22:43

Just got help from a friend. The problem was really silly...

The problem was just that my <Nav/> component needed a higher z-index, for some reason it got placed behind the content.

How to add a global component (navigation) in Ionic React

1 Answers