Thursday, December 1, 2022
HomeiOS Developmentjavascript - Ion React Router doesn't route pages

javascript – Ion React Router doesn’t route pages


I’ve lately been enjoying round with capacitor to construct a cross platform app with React. The variations between regular JSX parts and Ionic parts appears fairly simple, however I’m having a difficulty with Ion React Router to create web page routing in my app.

My understanding is that ion react router is constructed on high of react router dom and that it features fairly equally. Nonetheless, when defining my routes inside ion react router, the routes will not be rendering my elements, and the console is displaying an odd HTML error. Following is my code and the error:

const Settings = () => (
  <IonPage>
    <IonHeader>
      <IonToolbar>
        <IonTitle>Settings</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent>Settings Web page and Content material</IonContent>
  </IonPage>
);

operate App() {
  return (
  <div>
    <div>Howdy World</div>
      <IonApp>
        <IonReactRouter>
          <IonRouterOutlet>
            <Route path="/settings" element={Settings} />
          </IonRouterOutlet>
        </IonReactRouter>
      </IonApp>
    </div>
  );
}

enter image description here

The error is occurring instantly when opening localhost:3000 with out ever navigating to the route. I’d count on the Settings element to render if I had been to navigate to localhost:3000/settings. Nonetheless, nothing occurs and I’m simply left with the HTML ‘did not assemble’ error.

Does anybody have any options about what I could also be doing fallacious right here? I’ve additionally connected my bundle.json to point out my dependancies, incase that’s useful. Thanks if advance for any concepts!!

"dependencies": {
"@capacitor/android": "^4.4.0",
"@capacitor/core": "^4.4.0",
"@capacitor/ios": "^4.4.0",
"@ionic/react": "^6.3.4",
"@ionic/react-router": "^6.3.4",
"@supabase/supabase-js": "^2.0.5",
"@tanstack/react-query": "^4.14.3",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"import": "^0.0.6",
"ionicons": "^6.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^5.3.4",
"react-router-dom": "^5.3.4",
"react-scripts": "^2.1.3",
"web-vitals": "^2.1.4"
},

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments