Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/acrool/acrool-react-router-hash
Hash Route + History Route Additional based for React Route v6
https://github.com/acrool/acrool-react-router-hash
hash-router react-router
Last synced: 2 months ago
JSON representation
Hash Route + History Route Additional based for React Route v6
- Host: GitHub
- URL: https://github.com/acrool/acrool-react-router-hash
- Owner: acrool
- License: mit
- Created: 2022-05-29T16:35:07.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-08T01:14:11.000Z (5 months ago)
- Last Synced: 2024-09-29T00:21:24.075Z (3 months ago)
- Topics: hash-router, react-router
- Language: TypeScript
- Homepage: https://acrool-react-router-hash.pages.dev/
- Size: 1.27 MB
- Stars: 10
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-react - Acrool React Route Hash - Router Hash (React underlying structure)
- awesome-react - Acrool React Route Hash - Router Hash (React underlying structure)
README
# Acrool React Router Hash
Hash Route + History Route Additional based for React Route v6[![NPM](https://img.shields.io/npm/v/@acrool/react-router-hash.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-router-hash)
[![npm](https://img.shields.io/bundlejs/size/@acrool/react-router-hash?style=for-the-badge)](https://github.com/acrool/@acrool/react-router-hash/blob/main/LICENSE)
[![npm](https://img.shields.io/npm/l/@acrool/react-router-hash?style=for-the-badge)](https://github.com/acrool/react-router-hash/blob/main/LICENSE)[![npm downloads](https://img.shields.io/npm/dm/@acrool/react-router-hash.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-router-hash)
[![npm](https://img.shields.io/npm/dt/@acrool/react-router-hash.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-router-hash)> with react-router-dom version 6.x
## Features
- With react-router-dom version 6.x
- In CSR, it is easy to implement the light box routing function
- Modified and enhanced HashRouter function by react-router-dom, supports path params
- Extract the shared optical box to the router to separate dependencies
- With [@acrool/react-modal](https://github.com/acrool/acrool-react-modal) to support persistent lightbox## Install
```bash
yarn add @acrool/react-router-hash
```## Usage
```tsx
import {Route, Routes, useLocation} from 'react-router-dom';
import {HashRoutes, HashRoute} from '@acrool/react-router-hash';
import {unstable_HistoryRouter as Router} from "react-router-dom";const history = createBrowserHistory({window});
const MainRouter = () => {
return{/* Base pathname */}
} />
}/>
{/* Hash pathname*/}
}/>}>
}/>
}/>
};import {useHashParams} from '@acrool/react-router-hash';
const Dashboard = () => {
const navigate = useNavigate();return
;
Dashboard
This page dashboard.
navigate({hash: '/control/editAccount/1'})}>EditAccount HashModal
navigate({hash: '/control/editPassword'})}>EditPassword HashModal
};const EditAccount = () => {
const {id} = useHashParams<{id: string}>();
const navigate = useNavigate();
const pathname = useHashPathname();
return <>
hash pathname: {pathname}
useHashParams id: {id}
navigate({hash: undefined})}>Close HashModal
>;
};
```There is also a example that you can play with it:
[![Play react-editext-example](https://raw.githubusercontent.com/acrool/acrool-react-router-hash/main/play-in-example-button.svg)](https://acrool-react-router-hash.pages.dev)
## License
MIT © [Acrool](https://github.com/acrool) & [Imagine](https://github.com/imagine10255)