React Router Docs

npm install react-router-dom@6

• App.js

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

function App() {
  return <BrowserRouter>
    <Routes>
      <Route path='/' element={<>home page</>} />
      <Route path='testing' element={<h2>testing</h2>}/>
    </Routes>
  </BrowserRouter>;
}

export default App;

• App.js & pages

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Products from './pages/Products';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='about' element={<About />} />
        <Route path='products' element={<Products />} />
        <Route path='*' element={<Products />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

• pages
  • Home.jsx About.jsx
  • <Link to='/path' >PageDescription</Link>

• App.jsx updated

• work with nested pages
• Home.jsx updated

• add Navbar.jsx
• update Home.jsx

From Docs

• Index routes render in the parent routes outlet at the parent route's path.
• Index routes match when a parent route matches but none of the other children match.
• Index routes are the default child route for a parent route.
• Index routes render when the user hasn't clicked one of the items in a navigation list yet.

• refactor shared layout
  • add SharedLayout.jsx
  • update Home.jsx used only as content
  • update App.jsx

• Link when Active has a active style
• add StyledNavbar.jsx to replace Navbar.jsx
• NavLink className={fn} control the active link style

• read URL prarams
• update app.jsx
• add ProductDetail.jsx

• add mocks/data.js as products data
• update Products.jsx
• update ProductDetial.jsx

• add Login.jsx
• update StyledNavbar.jsx
• add Dashboard.jsx
• update app.jsx
• when login succeed, navigate to dashboard

• add ProtectedRoute.jsx
  • works like a higher components
• update App.jsx

• add SharedProductLayout.jsx
• update App.jsx