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

🧭 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>
      {/* <HiveUserAvatarButton /> */}
    </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.

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

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.

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

---

🙌 Support Back

❤️ Appreciate my work? Consider supporting @threespeak & @sagarkothari88! ❤️

---