acrool-react-router-hash

KO | EN

gitlite — search

#python #hacktoberfest #typescript #go #golang #machine-learning #deep-learning #docker #nodejs #java #awesome #vue #awesome-list #security

acrool-react-router-hash

(★ 12)

Hash Route + History Route Additional based for React Route v6

acrool-react-router-hash Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Acrool React Router Hash

<p align="center">
    Hash Route + History Route Additional based for React Router v7
</p>

[![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)

</div>

> with react-router-dom version 7.x

`^4.0.0 support react-router-dom >=7.0.0`, `react >=18.0.0 <20.0.0`

`^3.2.0 support react-router-dom 6.x`, `react >=18.0.0 <20.0.0`

## Features

- With react-router-dom version 7.x
- In CSR, it is easy to implement the light box routing function
- Supports both JSX mode and object mode route definitions
- 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

### JSX Mode

```tsx
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import {HashRoute, HashRoutes, useHashParams, useHashPathname} from '@acrool/react-router-hash';

const MainRouter = () => {
    return <Router>

{/* Base pathname */}
        <Routes>
            <Route path="/" element={<Dashboard/>}/>
            <Route path="*" element={<NotFound/>}/>
        </Routes>

{/* Hash pathname */}
        <HashRoutes>
            <HashRoute path="login" element={<Login/>}/>

</Router>;
};
```

### Object Mode

```tsx
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import {HashRoutes} from '@acrool/react-router-hash';

const MainRouter = () => {
    return <Router>

{/* Base pathname */}
        <Routes>
            <Route path="/" element={<Dashboard/>}/>
            <Route path="*" element={<NotFound/>}/>
        </Routes>

{/* Hash pathname — object mode */}
        <HashRoutes routes={[
            {path: 'login', element: <Login/>},
            {
                path: 'control/*',
                element: <EditLayout/>,
                children: [
                    {path: 'editAccount/:id', element: <EditAccount/>},
                    {path: 'editPassword', element: <EditPassword/>},
                ],
            },
        ]}/>

</Router>;
};
```

### Hook Mode

```tsx
import {useHashRoutes} from '@acrool/react-router-hash';

const HashRouter = () => {
    return useHashRoutes([
        {path: 'login', element: <Login/>},
        {
            path: 'control/*',
            element: <EditLayout/>,
            children: [
                {path: 'editAccount/:id', element: <EditAccount/>},
                {path: 'editPassword', element: <EditPassword/>},
            ],
        },
    ]);
};
```

### Navigate & Hooks

```tsx
import {useNavigate} from 'react-router-dom';
import {useHashParams, useHashPathname} from '@acrool/react-router-hash';

const Dashboard = () => {
    const navigate = useNavigate();

return <div>
        <h2>Dashboard</h2>
        <button type="button" onClick={() => navigate({hash: '/control/editAccount/1'})}>
            EditAccount HashModal
        </button>
        <button type="button" onClick={() => navigate({hash: '/control/editPassword'})}>
            EditPassword HashModal
        </button>
    </div>;
};

const EditAccount = () => {
    const {id} = useHashParams<{id: string}>();
    const navigate = useNavigate();
    const pathname = useHashPathname();

return <>
        <p>hash pathname: {pathname}</p>
        <p>useHashParams id: {id}</p>
        <button type="button" onClick={() => navigate({hash: undefined})}>Close HashModal</button>
    </>;
};
```

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

acrool-react-router-hash

acrool-react-router-hash Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

acrool-react-router-hash

acrool-react-router-hash Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README