# url-for-react

> factory class to centralize router handling for page components

Latest version **1.1.0** (published 2021-10-12) · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install url-for-react
pnpm add url-for-react
yarn add url-for-react
bun add url-for-react
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2021-10-12 |
| First published | 2021-10-10 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | martlark |

## Links

- npm: https://www.npmjs.com/package/url-for-react
- Repository: https://github.com/martlark/url-for-react
- Homepage: https://github.com/martlark/url-for-react#readme
- Issues: https://github.com/martlark/url-for-react/issues
- npm.io page: https://npm.io/package/url-for-react

## Dependencies (10)

- [react](https://npm.io/package/react.md) ^17.0.2
- [eslint](https://npm.io/package/eslint.md) ^7.32.0
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [typescript](https://npm.io/package/typescript.md) ^4.4.3
- [web-vitals](https://npm.io/package/web-vitals.md) ^1.1.2
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.3
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.3.0
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.2.7
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.14.1
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.8.3

## Recent versions

- 1.1.0 (latest) — 2021-10-12
- 1.0.3 — 2021-10-10
- 1.0.2 — 2021-10-10
- 1.0.1 — 2021-10-10
- 1.0.0 — 2021-10-10

## README

## Introduction

url-for-react is a factory class to centralize router handling for page components.

A big problem using React's `react-router-dom` is the disconnect between Components,
URL routes and parameters.  This can end up in string constants all over the place
,making maintaining routes and components confusing.

The main idea is to have an exported factory Class that builds routes, links
and parameter handling.  This factory class is kept with the component, allowing
easier handling of routing, parameter and component changes.

Importing the factory class into a component allows that component to route to or link
using it.  The component used by `UrlFor` does not need to be exported.  This greatly 
simplifies handling routed components.  Providing further decoupling.

## Installation

```shell
npm install url-for-react
```

## Quick start

Before
------

#### Routed component

```JavaScript
    export default function Word(props) {
        const [word, setWord] = useState(null);
    
        useEffect(() => {
            setWord(props?.match?.params.word)
        }, [props]);
    
        return <h1>Word {word}</h1>
    }
``` 

#### Navigation and switching.

```html
    <ul>
        <li>
            <Link to="/word/hello">Word hello</Link>
        </li>
    </ul>    
    <Switch>
        <Route exact path="/word/:word" component={Word}>
        </Route>
    </Switch>
```

After
-----
#### Routed component

```JavaScript
    export const routeWord = new UrlFor("/word/:word", Word, "Words", "Pick the word");

    export default function Word(props) {
        const [word, setWord] = useState(null);
    
        useEffect(() => {
            setWord(routeWord.matchId(props))
        }, [props]);
    
        return <h1>Word {word}</h1>
    }
``` 
#### Navigation and switching.

```html
    <ul>
        <li>
            {routeWord.LinkTo('hello', 'hello')}
        </li>
    </ul>
    <Switch>
        {routeWord.Route()}
    </Switch>
```
Usage
-----

Factory class

```Javascript
UrlFor(route, component, text, title)
```

| parameter | description | example |
| ---- | ---- | ---- |
| route | a react-router-dom route specification | "/show_word/:word" |
| component | the React component that responds to the route | Word |
| text | text of a link if non supplied by `LinkTo` | "Click me" |
| title | the `title=` attribute for a `LinkTo` | "Open the show word page" |

### methods

#### LinkTo

```javascript
LinkTo(request_id, text, title)
```

Returns a `react-router-dom` Link component.

| parameter | description |
| ---- | ---- | 
| request_id | any single parameter for the link | 
| text | text of the link |
| title | the `title=` attribute |

NOTE: only one parameter or none is allowed.

#### Route

```javascript
Route()
```

Returns a `react-router-dom` Route component for use in `<Switch>`.

NOTE: always uses the `exact` attribute.

#### matchId

```javascript
matchId(props)
```

Returns the parameter passed into the route.  `props` can be `props` or `match` or `params`.

NOTE: only one parameter is supported.

---
_Source: https://npm.io/package/url-for-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._