React Search Route

This library provides the ability to render children based off the existence of what resides in a querystring. Out of the box, react-router-dom does not support routing via query parameters for a plethora of reasons. So we decided to form an opinion and encapsulate querystring routing logic ourselves.

Status

Branch	URL	Build Status
master	@cala/react-search-route"">https://www.npmjs.com/package/@cala/react-search-route

Installation

npm install @cala/react-search-route --save

Usage

Import components individually.

import SearchRoute, { SearchSwitch } from '@cala/react-search-route';

Or wrap it into a single statement.

import * as ReactSearchRoute from '@cala/react-search-route';

From there, you can use <SearchSwitch ></SearchSwitch> and <SearchRoute ></SearchRoute> in effectively the same way as
<Switch ></Switch> and <Route ></Route> from react-router-dom. You’ll also need to ensure that all route
components are wrapped by a parent <BrowserRouter /> from react-router-dom.

const exactMatch = (): JSX.Element => <div>Matched</div>;
const noMatch = (): JSX.Element => <div>Do not match me</div>;
const partialMatch = (): JSX.Element => <div>Partial match</div>;
// ...
<BrowserRouter>
  <SearchSwitch>
    <SearchRoute exact search={{ isFoo: 'true' }} render={exactMatch} ></SearchRoute>
    <SearchRoute
      search={{ isFoo: 'true', doesBar: 'true' }}
      render={partialMatch}
    ></SearchRoute>
    <SearchRoute
      exact
      search={{ isFoo: 'true', doesBar: 'true' }}
      render={noMatch}
    ></SearchRoute>
  </SearchSwitch>
</BrowserRouter>;

For more examples, see the tests written in 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