سلام دوستان.
من میخوام وقتی روی هر محصول کلیک میکنم آیدی اون محصول رو بهم نشون بده، کدمو به صورت زیر نوشتم:
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"
ممنون میشم راهنمایی کنید.
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>
درود،
اگر تنها قصد داری که یه سری اطلاعات رو به کامپوننت Product بفرستی میتونی از ورژن ۶ به بعد خیلی راحت اون رو به این صورت بنویسی:
<Route path="/product:id" element={<Product id={id} />}/>
@mahdirafiei
الان این ارور داخل کنسول نمایش داده میشه:
Uncaught ReferenceError: id is not defined
@arminrahmati999
امکانش هست که اطلاعات بیشتری رو در اختیار بزاری؟ شاید بتونی کد کل اون صفحه رو بفرسی. 😊
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>
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟