with-query-router
A small wrapper of react-router parsing the query params from the location.search
parse
Basic usage with // Let's say you are at location '/foo?counter=1' { const query = thisprops const counter = query // navigate to /foo?counter=2 query } { const query = thisprops const counter = query return <div> My counter is equal to counter <button onClick=thisonIncrementCounter> Increment </button> </div> } FooPage
context
Usage for creation and edition with { const foo query = thisprops const id = foo // creation with pathname context history // edition with pathname context query // creation|edition with search context query } { const history = thisprops const originLocationString = query history } { const dispatch foo history query = thisprops const id = foo || {} const originLocationString = query const formSubmitPromise = { } return formSubmitPromise } { const query = thisprops const isReadOnly = query return <Form initialValues=initialValues onSubmit=thisonFormSubmit render= <form onSubmit=handleSubmit> <Field name=name render= <input ...input readOnly=readOnly type="text" /> /> readOnly ? <button onClick=thishandleActivateForm type="button"> Create or Edit </button> : <button type="submit"> Save </button> </form> /> } FooPage
translate
Usage for url in foreign language with // Let's say you are at location '/foo/compteur=1' { const query = thisprops const counter = query // navigate to /foo?compteur=2 query } { const query = thisprops const counter = query return <div> My counter is equal to counter <button onClick=thisonIncrementCounter> Increment </button> </div> } mapper: compteur: "counter" FooPage