scrimba
Learn React Router
Actions
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

Protected Routes w/ loaders
AboutCommentsNotes
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,
} 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>}
/>
<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
/
-4:20