React and Ionic Routing

React Routing

What is routing in react?

Routing in React is the process of mapping URLs(uniform resource locators) to different components in a single-page application (SPA). It allows you to create different pages and navigate between them in your application without reloading the entire page.

React Router is the most popular routing library for React and is widely used to manage client-side routing in React applications. It provides a simple API for defining the routes and mapping them to the corresponding components, (source is chat.openai.com).

• React itself does not have a router built into it so an external package called react-router-dom is needed to get routing working in a react application.
• Two types used are the BrowserRouter and the HashRouter. The BrowserHistory is commonly used which uses the HTML5 history API to keep the user interface(UI) insync with the URL whereas the HashRouter uses the hash(#) portion of the URL to keep the it insync with the UI. For example, to navigate to certain component using the HashRouter, we would do have as follows, https://localhost:8100/#news.

import {BrowserRouter, Route} from 'react-router-dom'

import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react'

import { IonReactRouter } from '@ionic/react-router'

import Home from './pages/Home'

import News from './pages/News'

const App: React.FC = () => {

return (

<IonApp>

<BrowserRouter>

<Route exact path="/">

<Home />

</Route>

<Route exact path="/news">

<News />

</Route>

<Redirect exact path='/' to="/home" />

</BrowserRouter>

);

};

export default App;

Ionic Routing

• Ionic routing makes use of prebuilt components bundled into @ionic/react-router package. IonReactRouter, IonRouterOutlet, Route, Redirect, Link are some of the components.

const App: React.FC = () => {

return (

<IonApp>

<IonReactRouter>

<IonRouterOutlet>

<Route exact path="/">

<Home />

</Route>

<Route exact path="/news">

<News />

</Route>

</IonRouterOutlet>

</IonReactRouter>

);

};

export default App;

I started using Ionic lately and my reason is, when used together with react and capacitor, I am able to build cross-platform applications such as for the web, desktop, android and ios just using one codebase, it's like killing two birds with one stone.