پیش به سوی تابستان؛ با تخفیف‌های داغ راکت!

بزن بریم!

ثانیه

دقیقه

ساعت

روز

ورود عضویت

Armin Rahmati

3 سال پیش توسط Armin Rahmati مطرح شد

9 پاسخ

ارسال پارامتر به روت

سلام دوستان.
من میخوام وقتی روی هر محصول کلیک میکنم آیدی اون محصول رو بهم نشون بده، کدمو به صورت زیر نوشتم:

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import Header from "./sections/Header";
import { Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
import Product from "./Product";

class App extends React.Component {
    render() {
        return (
            <div>
                <Header/>
                <div className="container">
                    <div style={{ paddingTop: 70 }}>
                        <Routes>
                            <Route path="/" element={<Home/>}/>
                            <Route path="/product:id" element={<Product/>}/>
                            <Route path="/about" element={<About/>}/>
                            <Route path="/contact" element={<Contact/>}/>
                        </Routes>
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

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

class Product extends React.Component{
    render() {
        const params = useParams();
        const id = params.id;
        console.log(id);
        return (
            <div>
                <h2>Product : {id}</h2>
            </div>
        );
    }
}

export default Product;

ولی آیدی رو نشون نمیده.
کنسول هم یه warning میده:

No routes matched location "/product/1"

ممنون میشم راهنمایی کنید.

ثبت پرسش جدید

سهیل رضایی

@rezaesoheil 3 سال پیش مطرح شد

route هات رو بزار داخل کامپوننت switch

<Routes>
    <Switch>
                <Route path="/" element={<Home/>}/>
               <Route path="/product:id" element={<Product/>}/>
              <Route path="/about" element={<About/>}/>
              <Route path="/contact" element={<Contact/>}/>
    <Switch>
</Routes>

ارسال پاسخ

مهدی رفیعی

تخصص : توسعه دهنده نرم افزار

@mahdirafiei 3 سال پیش مطرح شد

درود،

اگر تنها قصد داری که یه سری اطلاعات رو به کامپوننت Product بفرستی میتونی از ورژن ۶ به بعد خیلی راحت اون رو به این صورت بنویسی:

<Route path="/product:id" element={<Product id={id} />}/>

ارسال پاسخ

Armin Rahmati

@arminrahmati999 3 سال پیش مطرح شد

@mahdirafiei
الان این ارور داخل کنسول نمایش داده میشه:

Uncaught ReferenceError: id is not defined

ارسال پاسخ

مهدی رفیعی

تخصص : توسعه دهنده نرم افزار

@mahdirafiei 3 سال پیش مطرح شد

@arminrahmati999

نیاز هست که متغیر id رو تعریف کنی و با توجه به نیاز مقدار دهی کنی 😁

ارسال پاسخ

Armin Rahmati

@arminrahmati999 3 سال پیش مطرح شد

@mahdirafiei
طبق کدی که خودتون گفتین id رو تعریف کردم ولی همچنان ارور میده.

ارسال پاسخ

مهدی رفیعی

تخصص : توسعه دهنده نرم افزار

@mahdirafiei 3 سال پیش مطرح شد

@arminrahmati999
امکانش هست که اطلاعات بیشتری رو در اختیار بزاری؟ شاید بتونی کد کل اون صفحه رو بفرسی. 😊

ارسال پاسخ

Armin Rahmati

@arminrahmati999 3 سال پیش مطرح شد

@mahdirafiei
کدایی که فرستادم به صورت کامل هست.

ارسال پاسخ

سهیل رضایی

@rezaesoheil 3 سال پیش مطرح شد

/product/:id

این طوری بنویس

ارسال پاسخ

Armin Rahmati

@arminrahmati999 3 سال پیش مطرح شد

@rezaesoheil
متاسفانه مشکل همچنان هست.

ارسال پاسخ

سهیل رضایی

@rezaesoheil 3 سال پیش مطرح شد

route هات رو بزار داخل کامپوننت switch

<Routes>
    <Switch>
                <Route path="/" element={<Home/>}/>
               <Route path="/product:id" element={<Product/>}/>
              <Route path="/about" element={<About/>}/>
              <Route path="/contact" element={<Contact/>}/>
    <Switch>
</Routes>

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

محبوب‌ترین آموزش‌ها

ارسال پارامتر به روت

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید