Please note that this question is not a duplicate of this one
I want to make pagination for my app. For example, the url for pages 2-10 should look like this:
/products/2.
However, when the page is 1, I don't want to show the page number, i.e. the url should look like this: /products.
I also don't want to add locale into my url.
I'm using the pages directory.
Related
We're about to relaunch an existing website, that was previously a wordpress site and now is going to be a react site.
The routing is done via react-router-dom and there are a couple of pages which will render dynamically depending on the parameters in the url.
There is one page that is basically used for a user to put in their data and sign up. This component has two parameters, one which is the user-id and another one.
The link to that component gets sent out to people who have previously expressed interest through the website and then gets mailed to them. This component also existed on the wordpress site, but lived on a very different route.
So now when we relaunch we want to make sure people with the old link still get redirected to the new, correct component instead of getting a 404.
My question is now, is there a way for me to redirect from the old url (which also contains both parameters in the slug) to the new one while passing on the parameters?
The old url looked like this:
.com/confirmation-FIRST_PARAM/?IDref=:SECOND_PARAM
The new url for rendering this page looks like this:
.com/confirmation/:FIRST_PARAM/:SECOND_PARAM
My first naive approach was to just create a new route in my App.js file like so:
<Route
path="/confirmation-:firstParam/?IDref=:id"
component={Confirmation}
/>
which doesn't work. I guess that's because it's not really complying with how parameters are passed in react-router. Is there a way to redirect users to the appropriate new page?
I now managed to get it to work, but I don't think it's the smartest way possible (or at least it feels like there should be a leaner solution).
I added another route for the old links and then within the component I am using the useLocation() hook to figure out at which pathname the component actually gets rendered.
Depending on that I set the first parameter. The user id is then extracted by using the search property of the location object:
oldId = location.search.split("=")[1];
Using the old id, the other param (pkf) and the useHistory hook I then redirect to the new route:
history.push(`/confirmation/${oldId}/${oldPkf}`);
Whenever now a user accesses the component through an old link, the parameters get pulled from the location and the user gets redirected to the new link.
Question: Is it possible to modify the current URL that's shown in browser's address bar and browser history?
To be specific, I only want to modify the URL that is visible to the user; I don't want to trigger navigation. (I have a Gatsby app, and Gatsby is using Reach Router.)
Motivation: I have a gallery of images that the user can click and navigate to URL such as /images/?id=52. The advantage of this approach is that /images/ can be prefetched to enable instant rendering of the page. However, this scheme is unfriendly to users who have disabled JS, as they will see no images at all when they navigate with query parameters. So I have also prerendered pages like /images/52/ that work without JS. So what I want to do is navigate the JS users with query parameters, but then modify the URL that they see to a URL that can be shared with anyone including non JS users.
What I think you're looking for is either window.location.replace() or window.location.assign()
Replace is merely visual, so if the user were to copy the URL to share with their friends you can manipulate that url that they see and copy.
Assign loads a new document, as if the URL you passed it is the one that got the document.
https://developer.mozilla.org/en-US/docs/Web/API/Location/replace
https://developer.mozilla.org/en-US/docs/Web/API/Location/assign
Edit: a comparison
Difference between window.location.assign() and window.location.replace()
I believe you'll need to create a NodeJs server to handle this sort of action. It can take a query parameter from the URL ('images/?id=52') and then return the user to the URL 'images/52'.
Or you may be able to use the 'gatsby-source-filesystem' package.
I'm working on a web application where a large set of data can be filtered using JavaScript. When a user selects filters, I want to update the URL of the page to reflect the selected filters so that the user can share that URL with someone else, and that person can load the page and my app will apply the same filters. I don't have a need for the back buttons in the browser to cycle thru the previous filters that were selected.
I think I have two approaches here:
I can create a representation of the filters and add them to the fragment of the current page via window.location.hash. I can parse them on page load to see if there are any already set.
I can create a representation of the filters as query string params, and manipulate the URL using the history API. I would use the replaceState method.
Is there a reason to chose one over the other? Again, I want to emphasize that I'm not concerned with any routing or browser history manipulation. I just want to provide a way for someone to put certain params in the URL that my JS code will parse and apply as the filters.
Using the Vue router and may be also vuex for state management should help you save some time. There is also a little helper library for url encoding / decoding --> qs.
To your question "history vs hash": that depends on your application, the system which hosts the application (e.g. part of a content management system with its own url handling) and the meaning of the params.
History mode generates better looking paths and features some more control, as long as you stay in your application. But: as your path segments have no identifiers, the sort order matters.
Scenario: You have an application which can have three params:
/value1/value2/value3 means something else as /value1/value3/value2
With a query string you don't need to take care about sort order, as every value has its key:
key1=value1&key2=value2&key3=value3 is the same as key1=value1&key3=value3&key2=value2
I've read about escaped fragments, but I don't think that it applies here because what I need to do is to route specific URL routes to certain actions on the same page in a SEO-friendly way.
Consider an example: a page has 30 posts in it. The markup is already there, no AJAX magic here. Once a user clicks a URL like example.com/#/test-post, I want to open a popup with the post contents (suppose that test-post is the post slug or any other content identifier).
This applies to posts, image galleries and pretty much any content that I want to show in a popup by matching a URL route to a certain Javascript action. The technical part is a piece of cake, but how would this perform SEO-wise? I understand that using separate pages for individual posts would probably be best, but is it possible to allow a single-page website to be crawled for individual posts so that the test-post accessed through example.com/#/test-post via Javascript ends up as a separate link in Google search results?
Using Hash Properties in order to do different things on the same webpage via JavaScript might be really useful at some situations. However, looking it from a SEO prespective, I don't thing is a great solution at all.
The reason of that is that the fragment identifier introduced by a hash mark # is the optional last part of a URL for a document. It is typically used to identify a portion of that document. As a result from a SEO prespective, only one page will be stored.
I would suggest you, to make usage of .htaccess and Friendly URLS to do so. For instance, this might look like this:
SEO friendly URL: `www.example.com/test-post`
window.onLoad = function(){
var URL = window.location.href;
switch(URL){
//Perfom different actions here
}
}
I am building a webapp and have a few arrays that I would like to pass through the URL in order to make the results of my application easily sharable.
Is there an efficient way to do this? I know a lot of websites (like youtube) use some sort of encoding to make their URLs shorter, would that be an option here?
Thanks in advance!
What I suspect you're asking is you have some page where the user can alter information, etc, and you want a way to create a URL on the fly with that information so it can easily be accessed again. I've listed two approaches here:
Use the query string. On your page you can have a button saying "save" that produces a URL with info about what the user did. For example, if I have a webpage where all I do is put my name in and select a color, I can encode that as http://my-website.com/page?name=John_Doe&color=red. Then, if I visit that link, your page could access the query object in JavaScript and load a page with the name and color field already set.
An approach for the "YouTube-style" URLs would be to create a hash of the relevant information corresponding to the page. For example, if I were creating a service for users to store plaintext files. These files are to have the following attributes: title, date, name, and body. We can create a hash of the string hash_string = someHashFunction(title+date+name).
Of course, this is a very naive hashing scheme, but something like this may be what you are looking for. Following this, your URL would be something like http://my-website.com/hash_string. The key here is not only creating these URLs, but having a means to route requests on the server side to the page corresponding to the hash_string.