score:2
try this:
<router>
<route path='/' component={(props) =>
(<somecomponent value={this.state.value} {...props} )/>} />
</router>
note, you need to pass ...props
if you want to access route properties in the component (such as match, location or history like in this.props.history
in the component's code).
update:
for performance reasons, it might be better to use render
in this case, like in:
<router>
<route path='/' render={(props) =>
(<somecomponent value={this.state.value} {...props} )/>} />
</router>
as per react docs:
when you use component (instead of render or children) the router uses react.createelement to create a new react element from the given component. that means if you provide an inline function to the component attribute, you would create a new component every render. this results in the existing component unmounting and the new component mounting instead of just updating the existing component. when using an inline function for inline rendering, use the render or the children prop (below).
Source: stackoverflow.com
Related Query
- Passing props to component in React Router 4
- Passing props from higher level component to lower level component, React Router in play
- Passing props to Children component from Parent state- React Router
- Passing props from a navlink to a component React Router
- React Router - Passing match via props to a component rendered using Route::render
- Passing props to a component using a variable (not a static component) in React router 5
- React passing props to child component using TypeScript and React Router
- React router Passing props to a child component
- Passing multiple props to React component
- Passing props to React Router children routes
- Passing custom props to router component in react-router v4
- Passing props to a react component wrapped in withRouter() function
- React passing additional classNames to child component in addition to other props
- React router pass props to route component
- React props destructuring when passing to component
- Passing props from react router to children on the server
- Auth Protected Routes React Router V4 - Passing Props
- passing a type argument for the props of a react component for a higher order component
- React Router <Link> and <Route> not passing state to Component
- Passing props to a webpacker react component in rails 5.1
- Passing MobX @observable of array to React Component props of PropTypes.array
- Send props to react router component from parent layout component
- Passing props to <Outlet /> when nestining routes in React Router v6?
- Passing Props to a Component in React Routing
- React + TypeScript: Passing React Component as Props, rendering with props [Error: TS2339]
- Passing both match param and props into react component when using routing
- Passing props from outlet to parent using React Router 6
- React router dom passing data from parent component to child router component does not pass the props.match
- Props are not passing from parent to child components in React Functional component
- Passing props from one class component to other in react js
More Query from same tag
- How to embed Twitter widget to Reactjs?
- why material-ui takes too much space?
- ReactJS: Fade in div and fade out div based on state
- How to automatically generate typescript interfaces for redux connected components
- Storybook MUI v5 Documentation does not get generated
- converting react class to functional component with refs
- When click on item can't do this.setState REACT
- Returning a promise from a reducer with Redux
- Show Prompt react-router v4 on click CANCEL button
- Event listener is not removed in useEffect call within function-based component
- How to drag point on maps when scroll the map in react native
- What is the correct proptype for a ref in React?
- How to use this.props in React Styled Components
- React passing all values as props instead of selected value
- Why is react-native-image-picker's showImagePicker undefined in React Native?
- React does not render (in the first go) with respect to an array defines within the function or even passed as props
- Cheapest way to deploy a React app using NextJS SSR on AWS?
- Can not access react props data when I try to access it. Getting TypeError error
- React Switch not rendering different pages
- GraphQL mutation: Invariant Violation: Must contain a query definition
- How to stop execution of a function which is triggered by a button click using another button in ReactJS?
- React this.props is null
- How to increase size and family in a radar's Chartjs label
- Passing props to component after declaration in reactjs
- Facebook Create React App Build - Add Image As Prop Type
- Delete an element from array using redux
- Nodejs server sends bad encoded files as response to GET call
- Dynamically Choose a File Depending on Props
- How to generically create table cell and rows with an array of objects
- Enzyme doesn't reflect the setState changes inside an asynchronous setState callback