scrimba
Learn React Router
Nested Routes
Relative Paths
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

AboutCommentsNotes
Relative Paths
Expand for more info
index.jsx
run
preview
console
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route, Link } from "react-router-dom"
import Home from "./pages/Home"
import About from "./pages/About"
import Vans from "./pages/Vans/Vans"
import VanDetail from "./pages/Vans/VanDetail"
import Dashboard from "./pages/Host/Dashboard"
import Income from "./pages/Host/Income"
import Reviews from "./pages/Host/Reviews"
import Layout from "./components/Layout"
import HostLayout from "./components/HostLayout"

import "./server"

function App() {
return (
<BrowserRouter>
<Routes>
<Route element={<Layout />}>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/vans" element={<Vans />} />
<Route path="/vans/:id" element={<VanDetail />} />

<Route path="/host" element={<HostLayout />}>
<Route path="/host" element={<Dashboard />} />
<Route path="/host/income" element={<Income />} />
<Route path="/host/reviews" element={<Reviews />} />
</Route>
</Route>
</Routes>
</BrowserRouter>
)
}

ReactDOM
.createRoot(document.getElementById('root'))
.render(<App />);
Console
/host
-4:25