I have url routes in my app Router.js
:
'items': 'items', 'items/drafts': 'itemsDrafts', 'items/drafts/new': 'itemsDraftsNew', ...
But in browser when I define items/drafts/new/
it gives me 404 error :(
Is there a way to make this urls the same without copy-pasting all routes and adding trailing to them like:
'items': 'items', 'items/drafts': 'itemsDrafts', 'items/drafts/new': 'itemsDraftsNew', 'items/': 'items', 'items/drafts/': 'itemsDrafts', 'items/drafts/new/': 'itemsDraftsNew', ...
?
Thanks!
This is a super quick example of how to remove trailing slashes from URLs in React apps that use React Router. The solution is to add the following react router <Redirect ... /> that matches any URL with a trailing slash and automatically redirects it to the same URL without the trailing slash.
The trailing slash matters for most URLs Conventionally, a trailing slash (/) at the end of a URL meant that the URL was a folder or directory. At the same time, a URL without a trailing slash at the end used to mean that the URL was a file. However, this isn’t how many websites are structured today.
If you decide to include the trailing slash (like I do), then you should set up a 301 redirect from the non-trailing slash version to the trailing slash version. A trailing slash should not be added for URLs that end in a file name, such as .html, .php, .aspx, .txt, .pdf or .jpg.
But trailing slashes do matter for everything else because Google sees the two versions (one with a trailing slash and one without) as being different URLs. Conventionally, a trailing slash (/) at the end of a URL meant that the URL was a folder or directory.
my solution: 'url(/)': 'urlFunc'
()
- means optional (also take a look here - https://stackoverflow.com/a/14329976/2117550)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With