React and Ionic Routing
udemy courses

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.

要查看或添加评论,请登录

Alois Napitalai的更多文章

  • Using the Terminal in Ubuntu Server

    Using the Terminal in Ubuntu Server

    A graphical User Interface(GUI) makes it easy for us to navigate and do work especially in the Ubuntu desktop version…

    3 条评论
  • Logistic Regression

    Logistic Regression

    This is a follow up tutorial on my previous post linear regression on my road to understanding machine learning. As a…

    8 条评论
  • Road to Understanding Machine Learning

    Road to Understanding Machine Learning

    Traditional Machine Learning-Linear Regression Algorithm Machine learning is simply training a machine to make…

  • Automate a Full-stack Application Deployment Using GitHub Actions

    Automate a Full-stack Application Deployment Using GitHub Actions

    #githubactions #git #reactjs #expressjs #virtualization #fullstackdevelopment #githubrepository #statemanagement I have…

    2 条评论
  • Using Github Actions For Website Building

    Using Github Actions For Website Building

    name: Website Deployment Automation on: push jobs: installs: runs-on: ubuntu-latest…

    2 条评论
  • Excel Functions and Formulas

    Excel Functions and Formulas

    I got stuck on excel formulas and functions the other day, it took me some time to get what I wanted. I have a little…

  • Persisting GeoSpatial Data in MongoDB

    Persisting GeoSpatial Data in MongoDB

    Persisting data is crucial in web applications, if data is not saved, the data is wiped out when a page refresh is done…

  • Under the Hood of React Components

    Under the Hood of React Components

    Doing It The JSX Way Components are the building blocks of react websites and UIs and these components are built using…

  • Web Proxy Authentication

    Web Proxy Authentication

    In my last article, I wrote about the installation of squid as a caching server that can be used to locally cache pages…

    7 条评论
  • Squid Cache Web Proxy

    Squid Cache Web Proxy

    Many computer networks tend to crawl when there are many users accessing the internet, or there are unwanted traffic…

    4 条评论

社区洞察

其他会员也浏览了