I'm not actually making a folder called categories and filling it with a bunch of files like javascript.html or css.html, I just have one template and the router knows to direct to the proper template. The routes for these pages look something like this: If you go to /categories/javascript or /categories/css, you end up on a category listing page. If you go to /me, you're redirected to my about me page. (If you know what routing is, feel free to skip this section.)Įxample: If you go to, you end up on my home page. Routing is how a web applications direct traffic. Hence this specific URL can be shared with other users who will see the page with the same UI then.React doesn't come with a built-in router, but we can easily achieve routing with the react-router-dom library. It improves the user experience tremendously, because a URL becomes more specific to what the user sees on a page.
That's it for using a URL for state instead of using one of React's state management Hooks. The same happens when the application navigates a user to a route with search params with its optional search params set. useState ( as initial state from React Router's Hook. The App component will be the following - which is similar to the App component from the previously mentioned React Router tutorial:Ĭonst = React. We will not be using React's useState Hook to capture the search state, but a shareable URL by using React Router. To get things started, we will implement the previous image where we have a list of items and search it via a HTML input field. Then the other user who gets the link will see the same filtered list of items on their page. bookshelf?title=Rust) as a key value pair, and therefore can be shared with another user. "Rust"), the search param gets appended to the URL (e.g.
If one user searches a list of items by title (e.g. Therefore a best practice would be managing this search state in a URL, because this way the search state becomes shareable with other users. Which is fine for this one user, but bad for collaborating with other users. Now there is a high chance that React developers will manage this search state with React's useState Hook. In React this would translate into a list of items (here: products) and a HTML input field for filtering them. For example, if an application shows a catalog of products, a developer will enable a user to search it. By having state in a URL, you can share it with other people. Search Params (also called Query Params) are a powerful feature, because they enable you to capture state in a URL. Continue Reading: React Router 6 Introduction
0 kommentar(er)
