score:2
In complement of @juliangonzalez (good) answer:
Better to make your component not "route" aware, so instead of passing React match object you should do:
<Route path="/:id" render={({match}) =>
<RunningProject getProjectById={this.getProject} projectId={match.params.id} />
} />
score:28
In order to pass the match object you need to deconstruct the object passed as parameter to the render callback like this:
<Route path="/:id" render={({match}) => <RunningProject getProjectById={this.getProject} match={match} />} />
You can also get the other objects, here's a list of the objects passed:
history
location
staticContext
match
Or you could just pass the whole object, and deconstruct in the recipient component
<Route path="/:id" render={(obj) => <RunningProject getProjectById={this.getProject} obj={obj} />} />
Source: stackoverflow.com
Related Query
- How to pass the match when using render in Route component from react router (v4)
- how to pass props to the route when using react router <Link>
- I can not get the state from react router Link component using useLocation. So how can I pass it?
- How to pass a prop from one component to another when using react router link
- I'm using router for the first time.. How can I make route to render first component automatically when it's opened?
- How do I use react context API to pass data from parent component to child component when using react-router in the parent component in React.js?
- How do you pass data when using the navigate function in react router v6
- How to prevent component from unmounting immediately when using React Router V4
- Using React Hooks, when I pass down a prop from parent to a child component, the prop in the child component is undefined
- How to prevent React from re-rendering the whole component when using setInterval
- How can I pass props from one component to another using Link and router in react
- how to get route param values of child component from parent component in app using React Router
- When we render react Components from an iterable using Array.prototype.map() how is the index generated, and how does react uses it?
- react router how can I render only the component in his route whiout the others?
- React Router render error when using Link inside the Route element
- React Native - How to pass the Image from the other Component without using React Redux
- How to prevent child component from re-rendering when using React hooks and memo?
- How to display 404 when URL doesn't match any route and when the URL contains /#/ using ReactJS
- CDN links for React packages and how to import it when using react using the scripts from CDN
- Using React how do I toggle the visibility of a nested component from a container component?
- Getting the ref from a dynamic component when using Redux, React and react-router-dom 4.x
- React : How to stop re-rendering component or making an API calls on router change for the same route
- How to activate a react route and pass data from the service worker?
- How can I match if the current route matches a pattern in React Router Dom v6?
- How to pass data from a page to another page using react router
- How to access route params from a component other then the Router component
- How do I pass in the variant property of the material-ui TextField from a wrapping React component
- How to detect matched route from a component outside of the <Route/> component that was matched using react-router?
- how to update a route in React Router without re-mounting the component in a single page app?
- How to 1). put a div , 2). render a component without Route inside <Routes> with React Router in v6 React?
More Query from same tag
- Uncaught TypeError: Cannot read property 'contains' of null at HTMLDocument.handler
- How to customize theme in Semantic-UI-React (not Semantic-UI)?
- React's useMemo method resulting in invalid hook call
- How to switch multiple react components on same page
- How do you test a redux connected react component by exporting it as a PureComponent?
- How can I manage promise and map objects?
- React - Render dynamic list of components
- Traverse jsx in variable, then render it by appending to ref
- React Ant Design Steps -- NO 'Check Icon'
- npm ERR! code ELIFECYCLE in azure devops cant make it run
- Firebase v9 version of firebase.apps.length
- How do I move a frameless window in Electron without using -webkit-app-region
- React test onChange on input using react shallow-renderer
- ReactJS + Auth0 Sample app using the original logged in email. How to clear?
- Execute a function after rendering in React
- React if/else within JSX
- React Hooks - Ref is not avaiable inside useEffect
- ES6 Class inherit / extend flow type
- can't import React Component
- show two row and four items per row
- How to get useForm data in react component when input fields are in child component?
- cannot read property of bind this is not defined in react
- How to align two divs in different components?
- How to setup environment variable in Gitlab CI and make it testable in local
- How to filter useState hook Array and push & pull data to that array?
- How to render a component in React according to a selected value?
- Enzyme can't shallow render because of an imported script using 'addEventListener'
- How to change value via input and buttons simultaneously
- How can I migrate my old js code to react?
- Run a simple function on radio button select or deselect