score:0
import pathToRegexp from 'path-to-regexp';
const { match: { path, params } } = this.props;
pathToRegexp.compile(path)({
...params,
cityGuid: 'newCityGuid',
})
score:2
If you want to keep the full location and change some parameters if you are in a nested route, you can do it with pathToRegexp, url and path from match and pathname from location.
const ParamLink = ({
children,
match: { url = '', path = '', params: currentParams = {} } = {},
location: { pathname = '' } = {},
params = {}
}) => {
const urlPartToInsert = pathToRegexp.compile(path)({
...currentParams,
...params
});
const to = pathname.replace(url, urlPartToInsert);
return <Link to={to}>{children}</Link>;
};
export default ParamLink;
Source: stackoverflow.com
Related Query
- Multiple params with React Router change url but not component
- React router with browserHistory goes to server on every URL change
- Change one of params in url with react-router v4
- How to set active only one link with react router for multiple url state?
- React Router - Uncaught SyntaxError: Unexpected token < when refreshing an URL with params
- Url Params in React with React Router
- React Router Dom doesn't recognize url with query params
- React components not rendered on url change with React Router
- How to click a button and navigate to a new route with URL params using React Router 4
- Netlify blank page when refresh url with more than one path param using react router
- React Router 4: Change route with route params with History
- React router 404 error when refreshing page with url params
- react router v4 about how to match two url with one route and one component
- React Router url with params
- Bad replace url with query params react router 5.2
- Multiple params with React Router
- How to fetch the new data in response to React Router change with Redux?
- React Router v4 - Redirect to same route with different query params
- React router change url without page reload
- How to dispatch actions on location change with react router v4
- URL change without re rendering in React router
- Changing components based on url with react router
- React Router with params navigatin back needs double click
- React router not working with params
- react router dom link with params dont allways work
- How to scroll to top on route change with react router dom v6?
- ReactJS- Use slug instead of Id in the URL with React router
- React Router V4: How to render a modal in the same screen changing only the url and then with that url, be able to rebuild the whole screen
- How to test React Router params with Redux and enzyme
- Why React Router NavLink prop exact (v5) vs. end (v6) lead to different result with trailing slash in url
More Query from same tag
- How to prevent negative numbers and numbers above certain limit, and let the user loop among the available numbers, in an input field using keyevents?
- React app needs reload after login to load data
- React-grid-layout not updating properly with new elements unless I force its resizing
- How to bind one React Functional Component to another? (DevExtreme Chart to PivotGrid)
- NodeJs express, not caching images
- Default value doesn't work with react-select and Formik
- React JS styled-components importing images from public folder
- How to reload the Data of a child when a child Component is being rendered in ReactJs
- How to switch back to the default locale in Next.js?
- React Hooks state change doesn't pass in proper props
- React useEffect has missing dependencies
- display all documents from a collection react firebase
- React Prop-Types not detected ESLint
- Any way to get current params outside a component
- Next.js trouble with document.getElementById
- How and where to pass JSON data as a prop when creating components
- ReactJS with server side PHP templates?
- Promise.all error - Type '(Video | undefined)[]' is not assignable to type 'Video[]'
- How can i make a different oath flow between login & signup for social? like google oauth2.0 using passport js
- React: Close sidebar menu on route change
- sequential setState calls not working as expected
- Image doesn't appear and whole page goes blank
- Range bar in redux form
- AgGrid Customized (Selected) Row Styling
- React components not reloading in Phoenix 1.5 with Webpack
- ReactJS returns parsererror SyntaxError: Unexpected token a after AJAX call to JAVA servlet
- How to use nextjs with multiple plugins
- Multiple elements inside a component's render() using for
- Changing image source dynamically for carousel
- Add icon to the start of Material-UI's Autocomplete component