Προσθήκη άλλης μιας διαδρομής στο React Router

Έχουμε τη βασική διαδρομή που οδηγεί στην κύρια σελίδα, όπου έχουμε συνδέσμους για προϊόντα. Ας προσθέσουμε τώρα άλλη μια διαδρομή, ώστε όταν κάνουμε κλικ σε έναν από τους συνδέσμους να εμφανίζεται η σελίδα για το προϊόν, και όχι η οθόνη σφάλματος.

Για αρχή ας ανοίξουμε την εφαρμογή μας, που φτιάξαμε σε προηγούμενα μαθήματα και ας δημιουργήσουμε στο φάκελο routes το αρχείο product.jsx. Ας φτιάξουμε σε αυτό το component Product:

routes/product.jsxfunction Product() {}

export default Product;

Τώρα ας δημιουργήσουμε μέσα στο Product ένα αντικείμενο product, με ιδιότητες name, cost και amount, προς το παρόν αυτές θα είναι κάποιες σταθερές τιμές:

routes/product.jsxfunction Product() {
  const product = {
    name: 'Product',
    cost: 400,
    amount: 5,
  };
}

export default Product;

Και στη σελίδα του προϊόντος θα εμφανίζουμε, αντίστοιχα, το όνομά του, το κόστος και την ποσότητα:

routes/product.jsxreturn (
  <div>
    <h2>Σελίδα Προϊόντος</h2>
    <p>Όνομα: {product.name}</p>
    <p>Κόστος: {product.cost}</p>
    <p>Ποσότητα: {product.amount}</p>
  </div>
);

Βεβαιωθείτε να προσθέσετε την εισαγωγή του component Product στο αρχείο main.jsx:

main.jsximport Product from './routes/product';

Και, τελικά, ας προσθέσουμε άλλη μια διαδρομή στην εφαρμογή μας, ας το κάνουμε αμέσως μετά τη βασική. Ως διαδρομή ορίζουμε 'products/:productId', και ως στοιχείο για εμφάνιση είναι το component Product:

main.jsx{
  path: '/',
  element: <Root />,
  errorElement: <ErrorPage404 />,
},
{
  path: 'products/:productId',
  element: <Product />,
},

Και τώρα εκκινούμε την εφαρμογή, κάνουμε κλικ στους συνδέσμους και βρισκόμαστε στη σελίδα του προϊόντος (προς το παρόν είναι ίδια για όλους τους συνδέσμους), και όχι σε σφάλμα.