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: about 1 month 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 (3 months ago)
• Last Synced: 2024-09-29T00:21:24.075Z (about 2 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

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)