drex08x Comments - Answer Overflow

drex08x

•Created by drex08x on 1/2/2025 in #front-end

Need help with react, and react-router.

js 

**routes.jsx** - 
import { lazy, Suspense } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router";
import AppLayout from "../layout/appLayout/AppLayout";

const Home = lazy(() => import("../pages/app/Home/Home"));
const AboutUs = lazy(() => import("../pages/app/About/About"));
const ContactUs = lazy(() => import("../pages/app/ContactUs/ContactUs"));
const Login = lazy(() => import("../pages/app/Login/Login"));
const Register = lazy(() => import("../pages/app/Register/Register"));

const AppRoutes = () => {
  return (
    <Router>
      <Suspense fallback={<div>Loading....</div>}>
        <Routes>
          <Route element={<AppLayout />}>
            <Route index element={<Home />} />
            <Route path="/about-us" element={<AboutUs />} />
            <Route path="/contact-us" element={<ContactUs />} />
            <Route path="/auth/login" element={<Login />} />
            <Route path="/auth/register" element={<Register />} />
          </Route>
        </Routes>
      </Suspense>
    </Router>
  );
};

export default AppRoutes;

**AppLayout.jsx **-
import { Navbar, Sidebar, Footer } from "../../components";
import { Outlet } from "react-router";

const AppLayout = () => {
  return (
    <>
      <Navbar />
      <Sidebar />
      <Outlet />
      <Footer />
    </>
  );
};

export default AppLayout;

**Home.jsx** - 
import React from "react";
const Home = () => {
  return (
    <>
      <div className="hero-section">Hero section</div>
      <div className="other-section">Other section</div>
    </>
  );
};

export default Home;

js 

**routes.jsx** - 
import { lazy, Suspense } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router";
import AppLayout from "../layout/appLayout/AppLayout";

const Home = lazy(() => import("../pages/app/Home/Home"));
const AboutUs = lazy(() => import("../pages/app/About/About"));
const ContactUs = lazy(() => import("../pages/app/ContactUs/ContactUs"));
const Login = lazy(() => import("../pages/app/Login/Login"));
const Register = lazy(() => import("../pages/app/Register/Register"));

const AppRoutes = () => {
  return (
    <Router>
      <Suspense fallback={<div>Loading....</div>}>
        <Routes>
          <Route element={<AppLayout />}>
            <Route index element={<Home />} />
            <Route path="/about-us" element={<AboutUs />} />
            <Route path="/contact-us" element={<ContactUs />} />
            <Route path="/auth/login" element={<Login />} />
            <Route path="/auth/register" element={<Register />} />
          </Route>
        </Routes>
      </Suspense>
    </Router>
  );
};

export default AppRoutes;

**AppLayout.jsx **-
import { Navbar, Sidebar, Footer } from "../../components";
import { Outlet } from "react-router";

const AppLayout = () => {
  return (
    <>
      <Navbar />
      <Sidebar />
      <Outlet />
      <Footer />
    </>
  );
};

export default AppLayout;

**Home.jsx** - 
import React from "react";
const Home = () => {
  return (
    <>
      <div className="hero-section">Hero section</div>
      <div className="other-section">Other section</div>
    </>
  );
};

export default Home;

3 replies

KPCKevin Powell - Community

•Created by drex08x on 12/5/2024 in #front-end

Does anyone has experience building a shopify app with react and remix? I am stuck need some help.

So I am currently building a shopify app with react-remix, and inside that project, I want to create a Public API endpoint, which can be called from external sites/resources, that would just return the list of all the products from the store, on which the app is installed. on Also with the API call we will also pass a Bearer token to check if the API call is authorized or not. Please let me know if that's possible, I have written the code for it, but I am unable to call the API, I can't figure out using which URL should I call it upon.

Gaming

Programming