scrimba
Learn React Router
Actions
Consume message from search param on login page
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

Consume message from search param on login page
AboutCommentsNotes
Consume message from search param on login page
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 { requireAuth } from "./utils"

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 () => await requireAuth()}
/>
<Route path="login" element={<Login />} />

</Route>
))

function Login() {
return (
<>
<h1>Login page goes here</h1>
</>
)
}

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

ReactDOM.createRoot(document.getElementById("root")).render(<App />)
Console
/login?message=You%20must%20log%20in%20first
-7:37