Home>

There are two files on react one:


import React from "react";
import {Route, Routes, Navigate} from "react-router-dom";
import {LinksPage} from "./pages/LinksPage";
import {CreatePage} from "./pages/CreatePage";
import {DetailPage} from "./pages/DetailPage";
import {AuthPage} from "./pages/AuthPage";
export const useRoutes= (isAuthenticated)= >
 {
  if (isAuthenticated) {
    return (
      <
Routes >
        <
Route exact path= "/links" element= {LinksPage} >
          <
LinksPage />
        <
/Route >
        <
Route exact path= "/create" element= {CreatePage} >
          <
CreatePage />
        <
/Route >
        <
Route exact path= "/detail /: id" element= {DetailPage} >
          <
DetailPage />
        <
/Route >
      <
/Routes >
    );
  }
  return (
    <
Routes >
      <
Route exact path= "/auth" element= {AuthPage} >
        <
AuthPage />
      <
/Route >
      <
Navigate to= "/" />
    <
/Routes >
  );
};

and second:

import React from "react";
import {useRoutes} from "./routes";
import {BrowserRouter as Router} from "react-router-dom";
import "materialize-css";
function App () {
  const routes= useRoutes;
  return (
    <
Router >
      <
div className= "container" >
{routes} <
/div >
    <
/Router >
  );
}
export default App;

Compiles without error however element

<
div className= "container" >
{routes} <
/div >

is not rendered

for an example of what is in the authpage element

import React from "react";
export const AuthPage= ()= >
 {
  return (
    <
div >
      <
h1 >
 AuthPage <
/h1 >
    <
/div >
  );
};

Help me understand why this is happening. thanks in advance for your help