Breadcrumbs - salimakhtar92/ReactJs GitHub Wiki

import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import Home from '../src/components/home'
import ProductListing from '../src/components/products'
import ProductDetail from '../src/components/product-details'
import Breadcrumbs from '../src/components/breadcrumbs'
import '../src/styles.css'

function App() {
  return (
    <BrowserRouter>
      <Breadcrumbs />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<ProductListing />} />
        <Route path="//products/:id" element={<ProductDetail />} />
      </Routes>
    </BrowserRouter>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

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

const Home = ({}) => {
  const [trending, setTrending] = React.useState([])
  React.useEffect(() => {
    fetch('https://dummyjson.com/products?limit=6')
      .then((res) => res.json())
      .then((res) => setTrending(res.products.slice(0, 6)))
  }, [])
  return (
    <div>
      <h2>Home Page</h2>
      <div className="product-grid">
        {trending.map((product) => (
          <div className="product-card" key={product.id}>
            <Link to={`/products/${product.id}`}>
              <img src={product.thumbnail} />
              <h2>{product.title}</h2>
              <p>${product.price}</p>
            </Link>
          </div>
        ))}
      </div>
      <Link to="/products">
        <button>Show All Products</button>
      </Link>
    </div>
  )
}
export default Home

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

const ProductListing = ({}) => {
  const [trending, setTrending] = React.useState([])
  React.useEffect(() => {
    fetch('https://dummyjson.com/products')
      .then((res) => res.json())
      .then((res) => setTrending(res.products))
  }, [])
  return (
    <div>
      Product Listing
      <div className="product-grid">
        {trending.map((product) => (
          <div className="product-card" key={product.id}>
            <Link to={`/products/${product.id}`}>
              <img src={product.thumbnail} />
              <h2>{product.title}</h2>
              <p>${product.price}</p>
            </Link>
          </div>
        ))}
      </div>
    </div>
  )
}

export default ProductListing

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

const ProductDetail = ({}) => {
  const {id} = useParams()
  const [product, setProduct] = React.useState([])
  React.useEffect(() => {
    fetch(`https://dummyjson.com/products/${id}`)
      .then((res) => res.json())
      .then((res) => setProduct(res))
  }, [])
  return (
    <div>
      Product Detail
      <div style={{display: 'flex'}} key={product.id}>
        <img style={{height: 300, marginRight: 20}} src={product.thumbnail} />
        <div>
          <h2>{product.title}</h2>
          <p>${product.price}</p>
        </div>
      </div>
    </div>
  )
}
export default ProductDetail

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

const Breadcrumbs = () => {
  const {pathname} = useLocation()
  const paths = pathname.split('/').filter((x) => x)
  return (
    <div>
      {pathname !== '/' && <Link to="/">Home</Link>}
      {paths.map((path, index) => {
        if (index === paths.length - 1) {
          return <span key={index}>/{path}</span>
        }
        return (
          <Link key={index} to={`/${path}`}>
            /{path}
          </Link>
        )
      })}
    </div>
  )
}
export default Breadcrumbs