)
}
}
export default withQueryRouter()(FooPage)
```
## Usage for creation and edition with `context`
```javascript
import { Field, Form } from 'react-final-form'
import { requestData } from 'redux-saga-data'
import withQueryRouter from 'with-query-router'
class FooPage extends Component {
handleActivateForm = () => {
const { foo, query } = this.props
const { id } = foo
// creation with pathname context
history.push('new')
// edition with pathname context
query.change({ edit: null })
// creation|edition with search context
query.change({ foo: id
? `edit${id}`
: 'new'
})
}
handleDeactivateForm = formResolver => () => {
const { history } = this.props
const { originLocationString } = query.context()
formResolver()
history.push(originLocationString)
}
onFormSubmit = formValues => {
const { dispatch, foo, history, query } = this.props
const { id } = (foo || {})
const { originLocationString } = query.context()
const formSubmitPromise = new Promise(resolve => {
dispatch(requestData({
apiPath: `/foos/${id || ''}`,
body: { ...formValues },
handleSuccess: this.handleDeactivateForm(resolve),
method
}))
})
return formSubmitPromise
}
render () {
const { query } = this.props
const { isReadOnly } = query.context()
return (
)}
/>
)
}
}
export default withQueryRouter()(FooPage)
```
## Usage for url in foreign language with `translate`
```javascript
// Let's say you are at location '/foo/compteur=1'
import withQueryRouter from 'with-query-router'
class FooPage extends Component {
onIncrementCounter = () => {
const { query } = this.props
const { counter } = query.translate()
// navigate to /foo?compteur=2
query.change({ counter: counter + 1 })
}
render () {
const { query } = this.props
const { counter } = query.translate()
return (
My counter is equal to {counter}
)
}
}
export default withQueryRouter({
mapper: { compteur: "counter" }
})(FooPage)
```
---
_Source: https://npm.io/package/with-query-router · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._