Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/KamilBugnoKrk/aux-router
React router that supports rendering of multiple independent (auxiliary) routes.
https://github.com/KamilBugnoKrk/aux-router
auxiliary-routes independent-routes react router
Last synced: 3 months ago
JSON representation
React router that supports rendering of multiple independent (auxiliary) routes.
- Host: GitHub
- URL: https://github.com/KamilBugnoKrk/aux-router
- Owner: KamilBugnoKrk
- License: mit
- Created: 2021-07-10T13:35:53.000Z (over 3 years ago)
- Default Branch: origin
- Last Pushed: 2021-08-06T15:38:57.000Z (over 3 years ago)
- Last Synced: 2024-07-04T15:30:23.313Z (4 months ago)
- Topics: auxiliary-routes, independent-routes, react, router
- Language: TypeScript
- Homepage: https://kamilbugnokrk.github.io/aux-router
- Size: 5.62 MB
- Stars: 20
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-list - aux-router
README
# aux-router
> React router that supports rendering of multiple independent (auxiliary) routes.
[](https://www.npmjs.com/package/aux-router)
## Install
```bash
npm install --save aux-router
```
## Do I need auxiliary routing?
It can be especially useful when you have a side panel in your app and you want to switch between pages without losing the visibility of that panel:
Another important use case for auxiliary routing is a situation when you have an advanced modal or a side panel and you want to share the URL that contains information about what modal/panel is currently opened:
## Documentation
### AuxRouter
It is a core component. All other aux-router components should be inside AuxRouter element.
```js
import React from 'react'
import { AuxRouter } from 'aux-router'
const App = () => {
return ...
}
export default App
```
### AuxHashRouter
It is a core component. All other aux-router components should be inside AuxRouter element.
```js
import React from 'react'
import { AuxHashRouter } from 'aux-router'
const App = () => {
return ...
}
export default App
```
### Aux path vs. main path
Since the rest of components use terms _aux path_ and _main path_ it is important to understand the difference between them. Let's assume that we have this URL: example.com/a(b/c), the main path is `/a` and the aux path is `(b/c)`.
### AuxRoute
It is a route matcher. The AuxRoute that matches the current aux path will rendered.
```js
import React from 'react'
import { AuxRouter, AuxRoute } from 'aux-router'
function ComponentA() {
return (...)
}
function ComponentB() {
return (...)
}
const App = () => {
return (
{/*
ComponentA is rendered
only when URL contains
(componentA/...)
*/}
{/*
ComponentB is rendered
only when URL contains
(componentB/one)
*/}
)
}
export default App
```
- `componentName` - name of the component, the component will be rendered when the current aux path contains _(name/...)_
- `componentValue` - value the component, the component will be rendered when the current aux path contains _(.../value)_
- `component` - component to render
### AuxLink
It is a component that is responsible for creating links for aux path in your application.
```js
import React from 'react'
import { AuxLink } from 'aux-router'
const MyNavigation = () => {
return (
-
{/*
It creates a link to (componentA/one)
*/}
)
}
export default App
```
- `componentName` - it is translated to a link that contains _(name/...)_
- `componentValue` - it is translated to a link that contains _(.../value)_
- `description` - description of the link
- `activeClassName` - css class that will be applied when the current aux path matches the (name/value)
### AuxMainRoute
It is a route matcher. The AuxMainRoute that matches the current main path will rendered.
```js
import React from 'react'
import { AuxRouter, AuxMainRoute } from 'aux-router'
function ComponentA() {
return (...)
}
function ComponentB() {
return (...)
}
const App = () => {
return (
{/*
ComponentA is rendered
only when URL contains
/a as a main path
*/}
{/*
ComponentB is rendered
only when URL contains
/b as a main path
*/}
/>
)
}
export default App
```
- `component` - the component, that will be rendered when the current main path matches to the _path_ property
- `path` - the main path
### AuxMainLink
It is a component that is responsible for creating links for main path in your application.
```js
import React from 'react'
import { AuxMainLink } from 'aux-router'
const MyNavigation = () => {
return (
-
{/*
It creates a link to /a
*/}
)
}
export default App
```
- `activeClassName` - css class that will be applied when the current main path matches the _path_ property
- `activeStyle` - css style that will be applied when the current main path matches the _path_ property
- `description` - description of the link
- `path` - it is translated to a link that contains \_/value in the main path
### Example
[CodesAndBox](https://codesandbox.io/s/advanced-example-bf9vt?file=/src/App.tsx)
## Contributing
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
MIT © [KamilBugnoKrk](https://github.com/KamilBugnoKrk)