https://github.com/lemoncode/use-route-matching
https://github.com/lemoncode/use-route-matching
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/lemoncode/use-route-matching
- Owner: Lemoncode
- License: other
- Created: 2021-02-18T23:38:42.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-26T15:20:16.000Z (about 5 years ago)
- Last Synced: 2025-09-01T04:35:49.571Z (10 months ago)
- Language: JavaScript
- Size: 13.7 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# use-route-matching
## Features
Retrieves an object with the same structure as the application routes, with the match information about the current location.
## Usage
> **Important** It is necessary to use it in Router's child components.
For example, if you have the following routes object:
```
const routes = {
list: "/products",
product: {
root: "/product/:id",
info: "/product/:id/info",
gallery: "/product/:id/gallery",
details: "/product/:id/details",
},
contact: "/contact",
};
```
You can use the hook in your product info component (ie: _/product/1955/info_):
```javascript
const routeMatching = useRouteMatching(routes);
```
You have the following result:
```javascript
routeMatching = {
list: null,
product: {
root: { path: "/product/:id", url: "/product/1955", isExact: false, params: { id: "1955" } },
info: { path: "/product/:id/info", url: "/product/1955/info", isExact: true, params: { id: "1955" } },
gallery: null,
details: null,
},
contact: null,
};
```
## Installing
Using npm:
```bash
$ npm install use-route-matching
```
Using yarn:
```bash
$ yarn install use-route-matching
```
## Peer dependencies
**use-route-matching** needs the following peer dependencies:
```
"react": ">=16.8.6",
"react-dom": ">=16.8.6",
"react-router-dom": ">=5.1.2"
```
## Typescript
**use-route-matching** includes TypeScript definitions.
## Example
```javascript
import React from "react";
import { useHistory } from "react-router-dom";
import { useRouteMatching } from "use-route-matching";
import { routes } from "./routes";
const routes = {
list: "/products",
profile: {
root: "/user-profile",
account: "/user-profile/account",
settings: "/user-profile/settings",
},
contact: "/contact",
};
export const AppLayout = ({ children }) => {
const history = useHistory();
const routeMatching = useRouteMatching(routes);
const handleClick = path => () => history.push(path);
return (
<>
-
Products List
-
Contact
-
Profile
-
Account
-
Settings
-
{children}
>
);
};
```
## Credits
[Link to author github](https://github.com/v-borrego)