Breaking News: Grepper is joining You.com. Read the official announcement!

React nested route

Prickly Pony answered on March 1, 2023 Popularity 10/10 Helpfulness 3/10

answer React nested route

React nested route

Comment

CREATING THE PATH IN THE INDEX.JS FILE
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"
import VanDetail from "./pages/VanDetail"
import Layout from "./components/Layout"

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>
      </Routes>
    </BrowserRouter>
  )
}

ReactDOM
  .createRoot(document.getElementById('root'))
  .render(<App />);
  2ND CREATE A COMPONENT THAT WILL HOLD THE LAYOUT 
  import React from "react"
import { Outlet } from "react-router-dom"
import Header from "./Header"

export default function Layout() {
    return (
        <>
            <Header />
            <Outlet />
        </>
    )
}

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript nested

Link to this answer
Share Copy Link

Contributed on Mar 01 2023

Prickly Pony

0 Answers Avg Quality 2/10

React nested route

Contents

More Related Answers

React nested route

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.