Armin Rahmati

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

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

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

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>

ارسال پاسخ

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

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

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

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

گزینش سوالات

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

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

تگ‌های محبوب

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