React: البدء في استخدام React Router

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

function Home() {
  return <h2>Dashboard Home Page</h2>
}

function ProductList() {
  return <h2>Product List</h2>
}

function Settings() {
  return <h2>System Settings</h2>
}

function NotFound() {
  return <h2>404 — Page Not Found</h2>
}

function App() {
  return (
    <BrowserRouter>
      <nav style={{ display: 'flex', gap: '1rem', padding: '1rem', background: '#f0f0f0' }}>
        <Link to="/">Home</Link>
        <Link to="/products">Product Management</Link>
        <Link to="/settings">System Settings</Link>
      </nav>

      <main style={{ padding: '1rem' }}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/products" element={<ProductList />} />
          <Route path="/settings" element={<Settings />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </main>
    </BrowserRouter>
  )
}

export default App

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

function NavBar() {
  const linkStyle = {
    padding: '8px 16px',
    textDecoration: 'none',
    borderRadius: '6px',
    transition: 'all 0.2s'
  }

  const activeStyle = {
    ...linkStyle,
    backgroundColor: '#1976d2',
    color: '#fff',
    fontWeight: 'bold'
  }

  const inactiveStyle = {
    ...linkStyle,
    color: '#333'
  }

  return (
    <nav style={{ display: 'flex', gap: '12px', padding: '12px', background: '#fafafa' }}>
      <NavLink
        to="/"
        style={({ isActive }) => (isActive ? activeStyle : inactiveStyle)}
        end  // Exact Match，Avoid "/" Match all that start with "/" Starting path
      >
        Home
      </NavLink>
      <NavLink
        to="/products"
        style={({ isActive }) => (isActive ? activeStyle : inactiveStyle)}
      >
        Product Management
      </NavLink>
      <NavLink
        to="/settings"
        style={({ isActive }) => (isActive ? activeStyle : inactiveStyle)}
      >
        System Settings
      </NavLink>
    </nav>
  )
}

import { BrowserRouter, Routes, Route, Link, Outlet, useParams } from 'react-router-dom'

// Parent Layout Component — Shared Sidebar + Outlet
function ProductsLayout() {
  return (
    <div style={{ display: 'flex' }}>
      <aside style={{ width: '200px', padding: '16px', background: '#f5f5f5' }}>
        <h3>Product Management</h3>
        <nav style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
          <Link to="list">Product List</Link>
          <Link to="add">Add Item</Link>
        </nav>
      </aside>
      <main style={{ flex: 1, padding: '16px' }}>
        {/* The components of the child route are rendered here */}
        <Outlet />
      </main>
    </div>
  )
}

function ProductList() {
  const products = [
    { id: 1, name: 'React Programming Books', price: 79 },
    { id: 2, name: 'TypeScript Guide', price: 59 },
    { id: 3, name: 'Node.js Real-World Experience', price: 69 }
  ]

  return (
    <div>
      <h2>Product List</h2>
      <ul>
        {products.map(p => (
          <li key={p.id}>
            <Link to={`/products/detail/${p.id}`}>
              {p.name} — ${p.price}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

function AddProduct() {
  return (
    <div>
      <h2>Add Item</h2>
      <form onSubmit={e => { e.preventDefault(); alert('Submission Successful！') }}>
        <div><label>Product Name：<input name="name" /></label></div>
        <div><label>Price：<input name="price" type="number" /></label></div>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

function ProductDetail() {
  const { id } = useParams()
  return <h2>Product Details（ID：{id})</h2>
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<h2>Home</h2>} />
        {/* Nested Routes：Parent Route with Layout，Subnet routing is enabled Outlet Rendering */}
        <Route path="/products" element={<ProductsLayout />}>
          <Route index element={<ProductList />} />          {/* /products Default Display */}
          <Route path="list" element={<ProductList />} />     {/* /products/list */}
          <Route path="add" element={<AddProduct />} />       {/* /products/add */}
          <Route path="detail/:id" element={<ProductDetail />} /> {/* /products/detail/1 */}
        </Route>
        <Route path="*" element={<h2>404 Not found</h2>} />
      </Routes>
    </BrowserRouter>
  )
}

function UserDetail() {
  const { userId, postId } = useParams()
  return <p>User {userId} Article {postId}</p>
}
// URL: /users/42/posts/99 → userId=42, postId=99

import { useParams, Link, useNavigate } from 'react-router-dom'

// Simulated Product Data
const products = [
  { id: '1', name: 'React Programming Books', price: 79, description: 'Mastering It from Scratch React 18 Development' },
  { id: '2', name: 'TypeScript Guide', price: 59, description: 'Systematic Study TypeScript Type System' },
  { id: '3', name: 'Node.js Real-World Experience', price: 69, description: 'Backend Development: From Beginner to Advanced' }
]

function ProductDetail() {
  const { id } = useParams()
  const navigate = useNavigate()
  const product = products.find(p => p.id === id)

  if (!product) {
    return (
      <div>
        <h2>The product does not exist.</h2>
        <button onClick={() => navigate('/products')}>Back to Product List</button>
      </div>
    )
  }

  return (
    <div>
      <h2>{product.name}</h2>
      <p className="price">Price：${product.price}</p>
      <p className="desc">{product.description}</p>
      <Link to="/products">← Back to List</Link>
    </div>
  )
}

// Route Definitions
<Route path="/categories/:catId/products/:prodId" element={<ProductView />} />

// Extracted from the component
function ProductView() {
  const { catId, prodId } = useParams()
  // URL: /categories/electronics/products/42
  // catId = "electronics", prodId = "42"
  return <h2>Categories {catId} Items under {prodId}</h2>
}

// Method 1：Define two Route（Recommendations)
<Route path="/categories/:catId" element={<CategoryPage />} />
<Route path="/categories/:catId/:tab" element={<CategoryPage />} />

// Method 2：Make the determination within the component itself
function CategoryPage() {
  const { catId, tab } = useParams()
  const activeTab = tab || 'overview'  // Default value
  return <h2>Categories {catId} - {activeTab}</h2>
}

// Suppose we have the following routing configuration
<Routes>
  <Route path="/products/new" element={<NewProduct />} />     {/* Static Path */}
  <Route path="/products/:id" element={<ProductDetail />} />  {/* Dynamic Path */}
  <Route path="/products/:id/edit" element={<EditProduct />} /> {/* Hybrid Path */}
</Routes>

// Currently in /products under （ProductsLayout Within the component)

<Link to="list">        {/* → /products/list（Relative Path，After appending it to the current route) */}
<Link to="/list">       {/* → /list（Absolute Path，Replace directly) */}
<Link to="../settings"> {/* → /settings（Parent-level relative path) */}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/products" element={<ProductList />} />
      <Route path="/products/:id" element={<ProductDetail />} />
      <Route path="/about" element={<About />} />

      {/* Wildcard routes must be placed last */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  )
}

function NotFound() {
  return (
    <div style={{ textAlign: 'center', padding: '40px' }}>
      <h1>404</h1>
      <p>Sorry, the page you are looking for does not exist.。</p>
      <Link to="/">Back to Home</Link>
    </div>
  )
}

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

function OrderSuccess() {
  const navigate = useNavigate()
  const [countdown, setCountdown] = useState(5)

  useEffect(() => {
    const timer = setInterval(() => {
      setCountdown(prev => {
        if (prev <= 1) {
          clearInterval(timer)
          navigate('/orders')  // Automatically redirect when the countdown ends
          return 0
        }
        return prev - 1
      })
    }, 1000)

    return () => clearInterval(timer)
  }, [navigate])

  return (
    <div>
      <h2>Order Placed Successfully！</h2>
      <p>{countdown} You will be automatically redirected to the order page in seconds.</p>
      <button onClick={() => navigate('/orders')}>Check it out now</button>
    </div>
  )
}

import { BrowserRouter, Routes, Route, NavLink, Outlet, useParams } from 'react-router-dom'
import './App.css'

// Layout Components
function AdminLayout() {
  return (
    <div className="admin-container">
      <header className="admin-header">
        <h1>Tom E-commerce Management Backend</h1>
      </header>
      <div className="admin-body">
        <nav className="admin-sidebar">
          <NavLink to="/" end>Dashboard</NavLink>
          <NavLink to="/products">Product Management</NavLink>
          <NavLink to="/orders">Order Management</NavLink>
          <NavLink to="/settings">System Settings</NavLink>
        </nav>
        <main className="admin-content">
          <Outlet />
        </main>
      </div>
    </div>
  )
}

// Page Components
function Dashboard() {
  return <h2>Welcome back，Tom！Number of Orders Today：42</h2>
}

function ProductsLayout() {
  return (
    <div>
      <h2>Product Management</h2>
      <nav>
        <NavLink to="list">Product List</NavLink>
        <NavLink to="add">Add Item</NavLink>
      </nav>
      <Outlet />
    </div>
  )
}

function ProductList() {
  return <p>The product list is displayed here...</p>
}

function AddProduct() {
  return <p>The form for adding products is displayed here....</p>
}

function Orders() {
  return <h2>Order Management</h2>
}

function Settings() {
  return <h2>System Settings</h2>
}

function NotFound() {
  return <h2>404 — Page Not Found</h2>
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<AdminLayout />}>
          <Route index element={<Dashboard />} />
          <Route path="products" element={<ProductsLayout />}>
            <Route index element={<ProductList />} />
            <Route path="list" element={<ProductList />} />
            <Route path="add" element={<AddProduct />} />
          </Route>
          <Route path="orders" element={<Orders />} />
          <Route path="settings" element={<Settings />} />
          <Route path="*" element={<NotFound />} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}