Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yshgroup/react-router-tutorial
Created using the latest versions of React and React Router, this tutorial covers everything from basic to advanced routing concepts.
https://github.com/yshgroup/react-router-tutorial
learn-react-router react react-router react-router-dom-v6 react-router-tutorial tutorials
Last synced: 26 days ago
JSON representation
Created using the latest versions of React and React Router, this tutorial covers everything from basic to advanced routing concepts.
- Host: GitHub
- URL: https://github.com/yshgroup/react-router-tutorial
- Owner: YSHgroup
- Created: 2023-12-26T12:39:44.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-21T05:06:52.000Z (12 months ago)
- Last Synced: 2024-01-22T05:20:24.622Z (12 months ago)
- Topics: learn-react-router, react, react-router, react-router-dom-v6, react-router-tutorial, tutorials
- Language: JavaScript
- Homepage:
- Size: 59.6 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Router Tutorial
This project is a comprehensive tutorial for `react-router-dom`, designed to teach you how to manage navigation and routing in React applications. Created using the latest versions of React and React Router, this tutorial covers everything from basic to advanced routing concepts.
## Prerequisites
Before you begin, make sure you have the following installed:
- Node.js (LTS version recommended)
- npm or yarn as your package manager
## Installation
To get started with this project, clone the repository and install the dependencies:
```sh
git clone https://github.com/YSHgroup/react-router-tutorial.git
cd react-router-tutorial
npm install
```
Or if you are using yarn:
```sh
yarn
```
## Running the Application
Start the development server by running:
```sh
npm start
```
Or if you are using yarn:
```sh
yarn start
```
The application will launch in your default web browser at `http://localhost:3000`.
## Features
The tutorial covers the following topics and features:
- Basic Routing with ``, ``, and ``
- Nested Routing and Layouts
- Dynamic Route Parameters
- Using `` and `` for navigation
- Handling No Match (404) Routes
- Route Preloading and Lazy Loading with React Suspense
- Use of `useParams()`, `useLocation()`, `useRouteMatch()`, and `useHistory()` hooks
## Built With
- React - A JavaScript library for building user interfaces
- React Router - The de-facto standard routing library for React
## Versioning
We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/YSHgroup/react-router-tutorial/tags).
## Authors
- **Your Name** - Initial work - [YourUsername](https://github.com/your-username)
See also the list of [contributors](https://github.com/your-username/react-router-tutorial/contributors) who participated in this project.
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
## Acknowledgments
- Thanks to the React Router team for providing such an excellent routing library.
- Shoutout to everyone who has contributed to the React ecosystem making front-end development more approachable.
## Related Documentation
For further reference, consult the official documentation:
- [React Documentation](https://reactjs.org/docs/getting-started.html)
- [React Router Documentation](https://reactrouter.com/en/main)
---
Feel free to customize the README to match the specific details and features of your tutorial project.
---
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
- 