react-router-parsed


This package provides a wrapper to handle url parameter and querystring
parsing and error handling in an organized fashion.

Rationale

After working with react-router 4 enough, I started to realize that I had a lot of duplicated code to parse my
URL params and query string within render methods and event handlers for my components. For instance:

``js
class EditDeviceView extends React.Component {
render() {
const {match: {params}} = this.props
const organizationId = parseInt(params.organizationId)
const deviceId = parseInt(params.deviceId)

return (

{({loading, data}) => (


...

)}

)
}
handleSubmit = () => {
// duplicated code:
const {match: {params}} = this.props
const organizationId = parseInt(params.organizationId)
const deviceId = parseInt(params.deviceId)

...
}
}
`

After awhile, I had had enough of this. While I could have moved the parsing logic to a function in the same file,
I realized everything would be easier if I parse the params and query outside of my component and pass in the
already-parsed values as props.

Quick Start

`sh
npm install --save react-router react-router-parsed
`

`js
import Route from 'react-router-parsed/Route'
import useRouteMatch from 'react-router-parsed/useRouteMatch'
`

$3

If you need to parse any url parameters, add a paramParsers property and
consume the params prop in your route component, render function, or
children:

`js
import Route from 'react-router-parsed/Route'

const EditUserRoute = () => (
path="/users/:userId"
paramParsers={{ userId: parseInt }}
render={({ params: { userId }, ...props }) => (

)}
/>
)
`

`js
import useRouteMatch from 'react-router-parsed/useRouteMatch'

const EditUserRoute = () => {
const {
match,
params: { userId },
error,
} = useRouteMatch({
path: '/users/:userId',
paramParsers: { userId: parseInt },
})

if (!match) return null
if (error) return {error.message}
return
}
`

For each property in paramParsers, the key is the url parameter name, and the
value is a function that takes the following arguments and returns the parsed
value.

- raw - the raw string value of the parameter
- param - the key, or parameter name
- info - a hash of additional info; right now, just {match}

$3

If you need to parse location.search, add a queryParser property and
consume the query prop in your route component, render function, or
children:

`js
import qs from 'qs'
import Route from 'react-router-parsed/Route'

const EditUserRoute = () => (
path="/"
queryParser={(search) => qs.parse(search.substring(1))}
render={({ query: { showMenu }, ...props }) => (

)}
/>
)
`

$3

If any of your parsers throws errors, they will be collected and passed to an
(optional) renderErrors function:

`js
import Route from 'react-router-parsed/Route'

const EditUserRoute = () => (
path="/users/:userId"
paramParsers={{
userId: (userId) => {
const result = parseInt(userId)
if (!userId || !userId.trim() || !Number.isFinite(result)) {
throw new Error(invalid userId: ${userId})
}
return result
},
}}
render={({ params: { userId }, ...props }) => (

)}
renderErrors={({ paramParseErrors }) => (



)}
/>
)
`

renderErrors will be called with the same props as render, plus:

- paramParseError - a compound Error from parsing params, if any
- paramParseErrors - an object with Errors thrown by the corresponding
paramParsers
- queryParseError - the Error from queryParser, if any
- error - paramParseError || queryParseError

With the useRouteMatch hook, error paramParseError, paramParseErrors, queryParseError
are props of the returned object:

`js
const EditUserRoute = (): React.Node | null => {
const {
match,
params: { userId },
paramParseErrors,
} = useRouteMatch({
path: '/users/:userId',
paramParsers: {
userId: (userId) => {
const result = parseInt(userId)
if (!userId || !userId.trim() || !Number.isFinite(result)) {
throw new Error(invalid userId: ${userId})
}
return result
},
},
})
if (paramParseErrors) {
return (



)
}
if (!match) return null
return
}
``