https://github.com/ca-la/react-search-route
React routing with search (AKA query) parameters.
https://github.com/ca-la/react-search-route
parameters query query-params react react-router-dom typescript
Last synced: 3 months ago
JSON representation
React routing with search (AKA query) parameters.
- Host: GitHub
- URL: https://github.com/ca-la/react-search-route
- Owner: ca-la
- License: mit
- Created: 2019-10-02T18:20:29.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-19T19:35:06.000Z (over 2 years ago)
- Last Synced: 2025-09-21T07:55:50.283Z (5 months ago)
- Topics: parameters, query, query-params, react, react-router-dom, typescript
- Language: TypeScript
- Size: 281 KB
- Stars: 5
- Watchers: 6
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Search Route
This library provides the ability to render children based off the existence of what resides in a [querystring](https://developer.mozilla.org/en-US/docs/Web/API/URL/search). Out of the box, [react-router-dom](https://github.com/ReactTraining/react-router) does not support routing via query parameters for a [plethora of reasons](https://github.com/ReactTraining/react-router/issues/4410#issuecomment-276400992). So we decided to form an opinion and encapsulate querystring routing logic ourselves.
## Status
| Branch | URL | Build Status |
| -------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `master` | https://www.npmjs.com/package/@cala/react-search-route | [](https://circleci.com/gh/ca-la/react-search-route/tree/master) |
## Installation
`npm install @cala/react-search-route --save`
## Usage
Import components individually.
```js
import SearchRoute, { SearchSwitch } from '@cala/react-search-route';
```
Or wrap it into a single statement.
```js
import * as ReactSearchRoute from '@cala/react-search-route';
```
From there, you can use `` and `` in effectively the same way as
`` and `` from `react-router-dom`. You'll also need to ensure that all route
components are wrapped by a parent `` from `react-router-dom`.
```jsx
const exactMatch = (): JSX.Element =>
Matched;
const noMatch = (): JSX.Element => Do not match me;
const partialMatch = (): JSX.Element => Partial match;
// ...
;
```
For more examples, see the tests written in [src/spec.tsx](src/spec.tsx).
## Contributing
To tag off and release a new version to npm, run the release script:
```
$ ./bin/release patch # 0.0.x - bug fixes
$ ./bin/release minor # 0.x.0 - new features or changes
$ ./bin/release major # x.0.0 - large, backwards-incompatible changes
```