0
209
ViewsParameter can not be passed from react route to react Component
I have tried the previous solutions but it seems that the v6 of react-dom is not working that way.
I can not pass the id from the path to the component.
app.js
import Container from 'react-bootstrap/Container'
import Footer from './components/Footer';
import Header from './components/Header';
import './index.css';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
function App() {
return (
<Router>
<Header/>
<main className='py-3'>
<Container >
<Routes>
<Route path="/" exact element={<HomeScreen/>} />
{/* Please check this. I am passing id as a param */}
<Route path="/product/:id" element={<ProductScreen/>} />
</Routes>
</Container>
</main>
<Footer/>
</Router>
);
}
export default App;
The problem is in
<Route path="/product/:id" element={<ProductScreen/>} />
I am passing the :id to the ProductScreen component.
ProductScreen.js
import React from 'react'
import {Link} from 'react-router-dom'
import {Row, Col, Image, ListGroup, Button, Card} from 'react-bootstrap'
import Rating from '../components/Rating'
import products from '../products'
function ProductScreen({match}) {
const product = products.find((p)=>p._id==match.params.id)
return (
<div>
{product.name}
</div>
)
}
export default ProductScreen
I can not access the product id from the path.
error:
·
Juan Pablo Isaza
2 answers
Answer question0
You need to get the useParams hook in order to use params. https://reactrouter.com/docs/en/v6/getting-started/tutorial#reading-url-params
You can do it like this:
import React from 'react'
import {Link, useParams} from 'react-router-dom'
import {Row, Col, Image, ListGroup, Button, Card} from 'react-bootstrap'
import Rating from '../components/Rating'
import products from '../products'
function ProductScreen({match}) {
const params = useParams()
const product = products.find((p)=>p._id==params.id)
return (
<div>
{product.name}
</div>
)
}
export default ProductScreen
·
Juan Pablo Isaza
Report
0
You might wanna simplify it like this.
import React from 'react'
import {useParams} from 'react-router-dom'
import {Row, Col, Image, ListGroup, Button, Card} from 'react-bootstrap'
import Rating from '../components/Rating'
import products from '../products'
function ProductScreen() {
const {id} = useParams()
const product = products.find((p)=>p._id===id)
return (
<div>
{product.name}
</div>
)
}
export default ProductScreen
·
Juan Pablo Isaza
Report
Answer question