score:37
Accepted answer
react-router-dom
provides some handy hooks. in your case, i'd suggest useparams()
(link to docs)
import { useparams } from 'react-router-dom';
function mycomponent {
let { id } = useparams();
return (<p>{id}</p>);
}
i'd also probably opt for not using withrouter
if you will be using the hooks provided by react router
score:2
martins answer is correct and works for functional components. i had the same problem, however i was using a class component (class company extends component) and martins answer did not work for that case. if you have a class component you can do:
import { withrouter } from 'react-router-dom'
class mycomponent extends react.component {
componentdidmount() {
// here you have the id
const id = this.props.match.params.id;
}
}
export default withrouter(mycomponent);
Source: stackoverflow.com
Related Query
- react-router-dom get id from route with custom components and extra path
- router props and custom props with typescript react router dom for functional components
- React Router v4 components with similar paths (fixed and dynamic path param) are "overlapping"
- How to get props from <Route /> with react router dom v6
- React Router Dom rendering route error with loading components
- Using React Router with Switch and can't get the page to render different components when changing routes
- Get the route path with special character and dynamic variable in react
- React Router V4 protected private route with Redux-persist and React-snapshot
- React Router 4 with optional path AND optional parameter
- How to scroll to top on route change with react router dom v6?
- Sync queryParameters with Redux state and react router for function components
- React get props from Router with React Hooks
- Using render in react router dom with a private route
- React Router 4 and exact path with dynamic param
- Get react router path in props with redux ownProps
- React Router v5.2 - Blocking route change with createBrowserHistory and history.block
- React Router with a custom root and a base component
- react router preload data from multiple components with a single loader animation
- React Router with RefluxJS - Changing route Programmatically from a Store
- React router animations. How to preserve components from unmounting during route transition
- React Router 4 Optional parameter with custom path
- How to match ambiguous path and static path with React Router
- React Router V4 - Route between components and not entire page
- React Router v6 and recursive rendering of Route component from data
- How can I add multiple path for home page with react router dom 6?
- How to exclude param from route matches with Regex in React Router DOM?
- Framer Motion and React router 5: How do I prevent re-render of parent components with nested routes?
- React Dynamically download Components and get data from all child components
- How to add Link from react router dom to the submit button with the default Submit validation
- React router v6 and relative links from page within route
More Query from same tag
- Recompile when local dependency is changed
- How to pass data from a child to another a child (nested in Home page) in React?
- How to parse some data?
- React - Digit 0 is not saved to local storage all other digits are kept in sync
- React redux: having direct callbacks into presentation elements
- TypeScript React: Get form values with useRef
- TypeError: this.Ca is not a function while importing firebase components in my React project
- Does react.js play nice with jQuery/UI components
- How to refresh the data component on form submit in React?
- Navigate programmatically in react-redux application using TypeScript
- How can I simplify my reducer function or how long should a simple reducer function be?
- React - Ant Design change default filter icon in table to material icon
- How to pass a function defined in useEffect() to a child component in reactjs?
- for kotlin/js project conversion i'm getting type mismatch: inferred type is yyy but zindex? was expected
- React creating a button - non hardcoded properties
- redux saga multiple calls make next one when the other fails
- Bootstrap: Why isnt my glyphicon showing?
- Prevent top scroll after update state
- react-hook-form - empty input field after each submit
- How to replace an object property value in redux
- How to customize default border color of select after click action
- Cant seem to parse json data in React, unsure of any conceptual errors i might
- Nginx With SSL and Frontend + Backend same server
- Froala React component throwing "cannot set property 'more_btn' of undefined"
- Is Redux unidirectional?
- I am running a react app locally on apache2 server. It gives error URL not found on this server
- How can I dispatch a state change to redux when calling it from a function inside the component?
- next.js & material-ui - getting them to work
- Why is Heroku unable to cd to my frontend React App?
- Can't load JS bundle on route in React