CODEWITHSUNDEEP
reactjsurlreact-router-dom
Ali Masoumi
Ali Masoumi

Reputation: 11

how to handle %20 in Link URL

recently I found a weird problem I use Link from react-router-dom for products page and wrote that code:

<Link to={` /product/${product._id}`}>
  <img src={product.image} />
</Link>

and in app page this code:

<Route path="/product/:id" component={Products} />

and everything must goes in correct way but,, but in URL I see this shit :

/%20/product/1

and I have no idea why %20 appear !!

Upvotes: 0

Views: 1493

Answers (2)

J. Adam
J. Adam

Reputation: 1641

If you're using BrowserRouter and facing this issue then you should pass an empty string to the prop basename so for example:

import { BrowserRouter as AppRouter, ... } from "react-router-dom";

const RouterComponent = () => (
<AppRouter basename="">
...
</AppRouter>
)

Passing an empty string should solve this issue.

Upvotes: 1

Seyed Kazem Mousavi
Seyed Kazem Mousavi

Reputation: 457

you use space before /product

<Link to={`/product/${product._id}`}>
  <img src={product.image} />
</Link>

Upvotes: 0

Related Questions