🧭 Integrating React Router: My Routing Adventures with React 🛣️

Yesterday, we summoned Aioha into a fresh React app. Today, we open the portals of navigation! 🌀

👋 Hello Hive Community

Yesterday, we learned how to create a brand-new React project from scratch & integrated Aioha into it. Today, let's level up our frontend skills with routing.

Because let’s face it—every React app needs to know where to go! 🧭

🛠️ Step 1: Install React Router

Let’s bring in the latest version:

pnpm i -D react-router-dom@latest

🗂️ Step 2: Add Basic Pages

Inside the src/pages folder, let’s add these:

- Home.tsx
- Contact.tsx
- About.tsx
- NoPage.tsx

This gives our app the structure it needs for experiments, testing, and learning.

✍️ Step 3–4: Start Routing Setup

Inside App.tsx, first import routing tools and your shiny new pages:

import { BrowserRouter, Routes, Route } from "react-router-dom";

import LandingPage from "./pages/Landing/LandingPage";
import AboutUsPage from "./pages/About/AboutUs";
import ContactUsPage from "./pages/Contact/ContactUs";
import NotFoundPage from "./pages/NotFound/NotFound";

🧩 Step 5–7: Define Routes

Let’s connect routes to pages!

<Route path="/" element={<LandingPage />} />
<Route path="/about" element={<AboutUsPage />} />
<Route path="/contact" element={<ContactUsPage />} />
<Route path="*" element={<NotFoundPage />} />

✅ The last route acts like a catch-all. If someone types /i-am-great or any unsupported path, they’ll be shown a not-found page.

🤖 Step 8: Full Working Code (With Aioha too!)

Here’s what a complete working setup looks like:

import "./App.css";

import { initAioha } from "@aioha/aioha";
import { AiohaProvider } from "@aioha/react-ui";
import HiveUserAvatarButton from "./Components/HiveUserAvatarButton";

import { BrowserRouter, Routes, Route } from "react-router-dom";

import LandingPage from "./pages/Landing/LandingPage";
import AboutUsPage from "./pages/About/AboutUs";
import ContactUsPage from "./pages/Contact/ContactUs";
import NotFoundPage from "./pages/NotFound/NotFound";

const aioha = initAioha();

function App() {
  return (
    <AiohaProvider aioha={aioha}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<LandingPage />} />
          <Route path="/about" element={<AboutUsPage />} />
          <Route path="/contact" element={<ContactUsPage />} />
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </BrowserRouter>
      {/*  */}
    </AiohaProvider>
  );
}

export default App;

🎨 Let's Add a Navbar

Now that routing works, I thought: Why not add a navigation bar?

So I visited daisyUI and saw their beautiful navbar designs.

daisyui - Let's add navbar - screenshot

I added a new component called NavBar.tsx inside the components folder, and copy-pasted their JSX template.

Copy template code from JSX tab from daisy UI

After customizing the dummy content, I expected 🪄 magic.

But instead…

💥 It Broke Everything!

😢 It was chaos. The menu looked horrible on the landing page, and nothing aligned.

cry sob - did not work as expected

So yeah… I’ll fix this navbar beast in the next post 😅

🧵 Conclusion

Originally I planned to cover both routing and navigation, but that’s now a 2-part series!

So in this post, we:

✅ Installed react-router-dom
✅ Set up page routing
✅ Got a working layout (minus the navbar 😅)

Next time, we’ll tame the navbar and wire up navigation using Link from React Router.

🙏 Thank You!

Thanks for reading, Hive friends!
Let’s keep building, breaking things, and laughing while we debug 😂

More power to the Hive Blockchain and all its lovely devs, builders & dreamers!

📝 Final Note

Since English isn’t my first language, I asked ChatGPT/AI to help optimize this post to make it more readable and viewer-friendly.

I hope this isn’t against any downvoting rules 🙏
But if it is, feel free to let me know and I’ll be more cautious next time.

🚀 My Contributions to ♦️ Hive Ecosystem

Contribution	To	Hive	Ecosystem
Hive Witness Node	Hive API Node (in progress)	3Speak Video Encoder Node Operator (highest number of nodes)	3Speak Mobile App Developer
3Speak Podcast App Developer	3Speak Shorts App Developer	3Speak Support & Maintenance Team	Distriator Developer
CheckinWithXYZ	Hive Inbox	HiFind	Hive Donate App
Contributed to HiveAuth Mobile App	Ecency ↔ 3Speak Integration	Ecency ↔ InLeo Integration	Ecency ↔ Actifit Integration
Hive Stats App	Vote for Witness App	HiveFlutterKit	New 3Speak App