https://github.com/emanuelefavero/react-url-state-management
This is a simple react app that shows how to use the browser URL to manage state
https://github.com/emanuelefavero/react-url-state-management
nextjs react state-management url url-parameters usesearchparams
Last synced: 28 days ago
JSON representation
This is a simple react app that shows how to use the browser URL to manage state
- Host: GitHub
- URL: https://github.com/emanuelefavero/react-url-state-management
- Owner: emanuelefavero
- License: mit
- Created: 2023-09-19T21:45:33.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-21T09:08:23.000Z (over 1 year ago)
- Last Synced: 2025-02-04T16:50:29.464Z (3 months ago)
- Topics: nextjs, react, state-management, url, url-parameters, usesearchparams
- Language: JavaScript
- Homepage: https://react-url-state-management.vercel.app
- Size: 54.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React URL State Management
This is a simple react app that shows how to use the browser URL to manage state.
> Note: The react app is built with Next.js App Router, the same approach can be used with React Router.
## Demo
- [Live Demo](https://react-url-state-management.vercel.app)
#### Screenshot
## How to run
- Clone the repo, then run the following commands in the root directory
```bash
npm i
npm run dev
```
- open `http://localhost:3000` in your browser
## How it works
The app allows you to open two routes:
- `/products` - Filter a list of products using URL search parameter
- `/products-2` - Filter a list of products using useState hook
> Both approaches have the same functionality, but the first one uses the URL to manage the state, while the second one uses the useState hook
## Resources
- [Next.js App Router](https://nextjs.org/docs/getting-started/installation)
- [Next.js useSearchParams](https://nextjs.org/docs/app/api-reference/functions/use-search-params)
- [React Router](https://reactrouter.com/en/main)
## License
- [MIT](LICENSE.md)