react-router-dom#useRoutes JavaScript Examples

// ----------------------------------------------------------------------

export default function Router() {
  return useRoutes([
    {
      path: '/dashboard',
      element: <DashboardLayout />,
      children: [
        { path: '/', element: <Navigate to="/dashboard/app" replace /> },
        { path: 'app', element: <DashboardApp /> },
        {
          path: 'user',
          element: <UserList />
        },
        {
          path: 'user/create',
          element: <UserCreate />
        },
        { path: 'courses', element: <CourseList /> },
        { path: 'courses/create', element: <CourseCreate /> },
        { path: 'courses/:id', element: <CourseEdit /> },
        { path: 'blog', element: <Blog /> }
      ]
    },
    {
      path: '/',
      element: <LogoOnlyLayout />,
      children: [
        { path: 'login', element: <Login /> },
        { path: 'register', element: <Register /> },
        { path: '404', element: <NotFound /> },
        { path: '/', element: <Navigate to="/dashboard" /> },
        { path: '*', element: <Navigate to="/404" /> }
      ]
    },

    { path: '*', element: <Navigate to="/404" replace /> }
  ]);
}

function App() {
  let element = useRoutes([
    { path: "/", element: <Home /> },
    {
      path: "about",
      element: <About />,
      children: [
        {
          path: "services",
          element: <Services />,
        },
        { path: "history", element: <History /> },
        {
          path: "location",
          element: <Location />,
        },
      ],
    },
    { path: "events", element: <Events /> },
    { path: "products", element: <Products /> },
    { path: "contact", element: <Contact /> },
    { path: "*", element: <Whoops404 /> },
    {
      path: "services",
      redirectTo: "about/services",
    },
  ]);
  return element;
}

function App() {
    // console.log(process.env.REACT_APP_TARGET_ENV)
    // console.info(process.env.REACT_APP_TARGET_ENV)
    // console.warn(process.env.REACT_APP_TARGET_ENV)
    // console.error(process.env.REACT_APP_TARGET_ENV)

    // We removed the <BrowserRouter> element from App because the
    // useRoutes hook needs to be in the context of a <BrowserRouter>
    // element. This is a common pattern with React Router apps that
    // are rendered in different environments. To render an <App>,
    // you'll need to wrap it in your own <BrowserRouter> element.
    let element = useRoutes(
        process.env.REACT_APP_TARGET_ENV === 'design' ? designRoutes : appRoutes
    )

    return (
        <Fragment>
            <Suspense
                fallback={
                    <div>
                        <TopBarProgress
                            config={{
                                barColors: {
                                    0: PRIMARY_COLOR,
                                    0.5: PRIMARY_COLOR,
                                    '1.0': PRIMARY_COLOR,
                                },
                                shadowBlur: 5,
                            }}
                        />
                    </div>
                }
            >
                {element}
            </Suspense>
        </Fragment>
    )
}

// ----------------------------------------------------------------------

export default function Router() {
  return useRoutes([
    {
      path: '/dashboard',
      element: <DashboardLayout />,
      children: [
        { path: 'app', element: <DashboardApp /> },
        { path: 'user', element: <User /> },
      ],
    },
    {
      path: '/',
      element: <LogoOnlyLayout />,
      children: [
        { path: '/', element: <Navigate to="/dashboard/app" /> },
        { path: 'login', element: <Login /> },
        { path: 'register', element: <Register /> },
        { path: '404', element: <NotFound /> },
        { path: '*', element: <Navigate to="/404" /> },
      ],
    },
    { path: '*', element: <Navigate to="/404" replace /> },
  ]);
}

App = () => {
  // const isAuthenticated = () => {
  //   return localStorage.getItem("SocialGramToken") ? true : false;
  // };

  const allPages = useRoutes(routes);

  const toasterOptions = {
    style: {
      fontWeight: 500,
      fontFamily: "'Fira Sans', sans-serif",
    },
  };

  return (
    <React.Fragment>
      <Toaster toastOptions={toasterOptions} />
      <div className="container outside">
        <div className="row" style={{ marginTop: "14vh" }}>
          <Navbar />
          {allPages}

          {/* <Router>
            <Navbar />
            <Switch>
              <Route path="/" exact component={AuthPage} />
              <PrivateRoute path="/homepage" exact component={Feed} />
              <PrivateRoute path="/homepage/profile" component={Profile} />
              <PrivateRoute path="/homepage/myposts" component={MyPosts} />
              <PrivateRoute path="/homepage/settings" component={Settings} />
              <PrivateRoute component={Error404} />
            </Switch>
          </Router> */}
        </div>
      </div>
    </React.Fragment>
  );
}

App = () => {
  const allPages = useRoutes(routes);

  return (
    <React.Fragment>
      <ThemeProvider>
        <TopBar />
        {allPages}
      </ThemeProvider>
    </React.Fragment>
  );
}

App = () => {
  const content = useRoutes(routes);

  return (
    <Provider store={Store}>
      <SettingsProvider>
        <MatxTheme>
          <AuthProvider>{content}</AuthProvider>
        </MatxTheme>
      </SettingsProvider>
    </Provider>
  );
}

Component = () => {
  let element = useRoutes(routes);
  return element;
}

App = () => {
  const allPages = useRoutes(routes);

  const toasterOptions = {
    style: {
      fontWeight: 500,
      fontFamily: "'Poppins', sans-serif",
    },
  };

  AOS.init({
    // Global settings:
    disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
    startEvent: "DOMContentLoaded", // name of the event dispatched on the document, that AOS should initialize on
    initClassName: "aos-init", // class applied after initialization
    animatedClassName: "aos-animate", // class applied on animation
    useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
    disableMutationObserver: false, // disables automatic mutations' detections (advanced)
    debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
    throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)

    // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
    offset: 120, // offset (in px) from the original trigger point
    delay: 0, // values from 0 to 3000, with step 50ms
    duration: 400, // values from 0 to 3000, with step 50ms
    easing: "ease", // default easing for AOS animations
    once: false, // whether animation should happen only once - while scrolling down
    mirror: false, // whether elements should animate out while scrolling past them
    anchorPlacement: "top-bottom", // defines which position of the element regarding to window should trigger the animation
  });

  return (
    <React.Fragment>
      <StyledEngineProvider injectFirst>
        <ThemeProvider theme={darkTheme}>
          <CssBaseline />
          <Toaster toastOptions={toasterOptions} />
          {allPages}
        </ThemeProvider>
      </StyledEngineProvider>
    </React.Fragment>
  );
}