scrimba
Learn React Router
Actions
Challenge: Protected Routes w/ loaders
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Challenge: Protected Routes w/ loaders
AboutCommentsNotes
Challenge: Protected Routes w/ loaders
Expand for more info
index.jsx
run
preview
console
import React from "react"
import ReactDOM from "react-dom/client"
import {
RouterProvider,
createBrowserRouter,
createRoutesFromElements,
Route,
redirect
} from "react-router-dom"

import Layout from "./Layout"
import AuthRequired from "./AuthRequired"

const router = createBrowserRouter(createRoutesFromElements(
<Route path="/" element={<Layout />}>
<Route
index
element={<h1>Home page</h1>}
/>
<Route
path="protected"
element={<h1>Super secret info here</h1>}
loader={async () => {
const isLoggedIn = false
/**
* Challenge: if the user isn't logged in, redirect them to
* the login page
*/
return null
}}
/>
<Route path="login" element={<h1>Login page goes here</h1>} />

</Route>
))

function App() {
return (
<RouterProvider router={router} />
)
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />)
Console
/
-1:14