I am passing data via link component like this:
JavaScript
x
16
16
1
<div>
2
{data.map((myData) => (
3
<h2>
4
<Link
5
href={{
6
pathname: `/${myData.title}`,
7
query: {
8
id: myData.id
9
}
10
}}>
11
<a>{myData.title}</a>
12
</Link>
13
</h2>
14
))}
15
</div>
16
And getting this URL http://localhost:3000/this-is-a-title?id=630f3c32c1
Is there any other way to do the same but get rid of that ? and everything after it for better SEO?
Advertisement
Answer
You could build your path like so:
JavaScript
1
8
1
<Link
2
href={{
3
// http://localhost:3000/this-is-a-title/630f3c32c1
4
pathname: `/${myData.title}/${myData.id}`,
5
}}>
6
{myData.title}
7
</Link>
8
or any other format that works in your case e.g.
JavaScript
1
3
1
// http://localhost:3000/this-is-a-title:630f3c32c1
2
pathname: `/${myData.title}:${myData.id}`,
3
With React Router Dom you should be able to pick up the id using params