React Router 6

App.tsx

import React from 'react'
import { Outlet } from 'react-router-dom'

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

components-Home.tsx

import React from 'react'

function Home() {
  return <div>This is homepage</div>
}

export default Home

components-layouts-MainLayout.tsx

import React from 'react'
import { Outlet } from 'react-router-dom'
import TheNavbar from '../TheNavbar'

function MainLayout() {
  return (
    <div>
      <TheNavbar />
      <Outlet />
    </div>
  )
}

export default MainLayout

components-Login.tsx

import React from 'react'
import { useNavigate } from 'react-router-dom'

function Login() {
  const navigate = useNavigate()

  return (
    <div>
      <span>This login page use different layout</span>
      <p>
        <input type="text" placeholder="Username" />
      </p>
      <p>
        <input type="password" placeholder="Password" />
      </p>
      <button onClick={() => navigate('/')}>Go to Home</button>
    </div>
  )
}

export default Login

components-TheNavbar.tsx

import React from 'react'
import { NavLink } from 'react-router-dom'

export default function TheNavbar() {
  function activeStyle(isActive: boolean) {
    return isActive ? { color: 'red' } : {}
  }

  return (
    <p>
      <NavLink style={({ isActive }) => activeStyle(isActive)} to="/">
        Home
      </NavLink>
      {` - `}
      <NavLink style={({ isActive }) => activeStyle(isActive)} to="/product">
        Product
      </NavLink>
      {` - `}
      <NavLink to="/login">Login</NavLink>
    </p>
  )
}

index.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route, Routes } from 'react-router-dom'

import App from './App'
import MainLayout from './components/layouts/MainLayout'
import Home from './pages/Home'
import Login from './pages/Login'
import ProductList from './pages/ProductList'
import ProductItem from './pages/ProductItem'

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      {/*start routes*/}
      <Routes>
        <Route element={<MainLayout />}>
          <Route path="/" element={<Home />} />
          <Route path="/product" element={<ProductList />} />
          <Route path="/product/:id" element={<ProductItem />} />
        </Route>
        <Route element={<App />}>
          <Route path="/login" element={<Login />} />
        </Route>
      </Routes>
      {/*end routes*/}
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
)

pages-ProductItem.tsx

import React from 'react'
import { useParams } from 'react-router-dom'

function ProductItem() {
  const params = useParams()
  return (
    <div>
      Product item <strong>{params.id}</strong>
    </div>
  )
}

export default ProductItem

pages-ProductList.tsx

import React from 'react'
import { Link } from 'react-router-dom'

function ProductList() {
  return (
    <div>
      <p>This is product page</p>
      <ul>
        {[1, 2, 3].map((id, index) => (
          <li key={index}>
            <Link to={'/product/' + id}>Product {id}</Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default ProductList