SolidJSS
SolidJS•3y ago
blackburn4475

How do i write routes which update automatically based on if authenticated or not

Lets say that I have the below code and when i hit root path(
/
) i want to navigate to 
/login
 if I am not authenticated and 
/orders
 if I am authenticated. I tried using 
<Show>
 and it was not helping me out. I checked if the 
<Router>

navigate("/orders")
 is changing the url to 
/orders
 but the page doesn't load the respective component

I am a noob in Solidjs. Have been learning it from yesterday only. So any pointers or additional info would help me

App.jsx
function App() {
  const navigate = useNavigate()
  const auth = getAuth(app);
  const [authHref, setAuthhref] = createSignal("/login")

  // firebase auth
  auth.onAuthStateChanged(
    (user) => {
      setAuthhref("/orders")
      navigate("/orders")
    },
    (error) => {
      console.error(error)
    }
  );

  return (
    <Router>
      <Routes>
        <Route path="/" element={<Navigate href={authHref()}></Navigate>} />
        <Route path="/login" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/orders" element={<Orders />} />
        <Route path="/orders/:id?" element={<NewOrder />} />
        <Route path="/orders/:id/edit" element={<EditOrder />} />
        <Route path="/orders/new" element={<NewOrder />} />
        <Route path="/admin" element={<Admin />} />
      </Routes>
    </Router>
  );
}
Was this page helpful?