score:7
the props are passed to the render prop method by the route component. you can see this in the react router source code. the props passed by the route component have match, location, history, staticcontext
. if you want to use props from the parent component, where you are defining the render props method then you can omit the props argument.
render={() => <about {...props} />}
then you would get the props from the component that contains the route.
the example you have provided doesn't make much sense since that replicates the behaviour that you get by just using the 'component' prop on the route.
score:1
you get react router default props while passing props in render method just like if use component
instead of using render props which implicitly get all these props match, location, history and staticcontext. and you need to provide props as an argument otherwise it render method won't pass props down to the children because it will consider it undefined.
here is working example for render props in react router: https://codesandbox.io/s/72k8xz669j
score:7
we use route with render props as,
<route path = "/about" component={about} />
or,
<route path = "/about" render= { (props) => <about {...props} } />
the second one is different from the first one in the sense that in the second case, the about component has access to the props coming through the route.
say, for instance, there is a profile component,
<route path="/admin/profile"
render={ props => (
<profile tabs= {"valuepassed"} {...props} />
)}
/>
now in profile component, we can access all the props,
this.props.tabs give "valuepasses" in class-based component while props.tabs is used for functional component.
hope this helps.
Source: stackoverflow.com
Related Query
- Render Props - React Route
- Props that is being passed into React Route is undefined for the first render when using useEffect
- React Router 4 passing props through Route render doesn't work
- Route object validation as props in React
- How to pass the match when using render in Route component from react router (v4)
- React Component wait for required props to render
- HOC's and Render Props With Functional Components in React 16
- React router pass props to route component
- how to pass props to the route when using react router <Link>
- Cannot render same route with different parameters react router v4
- React router render prop route always re-renders components
- Can we render same route using navigator in react native?
- Using render in react router dom with a private route
- How to pass additional props throughout a Route element that has parameters in a Typescript based React Web Application
- How to load child component with props on first render with React Hooks
- Performance issue when destructuring props on React render method
- react props undefined inside the constructor and exist inside the render
- Wrap a React route render function in a HOC
- React Route render blank page
- React render private route after redux(user authentication) is updated
- Pass component props in Private Route with Typescript and React
- How to 1). put a div , 2). render a component without Route inside <Routes> with React Router in v6 React?
- React router v6 access route params and pass as props
- How to render React Route component in an entirely new, blank page
- Do react render props cause remounting of the child components?
- How to make my component re render after updating props from selector in react and redux-saga?
- Render Props and React Router
- Flow generics with React render props
- How do i render multiple props in a single component and then pass those props to a child component in React
- Prevent React component re render when route change
More Query from same tag
- (Lifecycle problem?) React Chart js-2 not updating data from componentDidMount
- Material ui : Table scroll to top of new page
- Adding tags to Gatsby Contentful blog
- Materialiui Paper api with close button
- React JS - How to set state of variable inside variable?
- Two inputs not submitting both values on form React js
- Using persist cookies with react on mobile devices
- Display number of matching search options on Textfield input in Material UI Autocomplete
- How to create a list in react using redux?
- Deployment pipeline with production react build
- React, localStorage is not persistent upon page refresh
- Is there any way to change state inside render in React js?
- React app gets 404 when fetching url with params
- React - How to pass image url from data map to component?
- How to react function component in like a toggle button
- React Checkbox Form State is Delayed
- I keep getting an error: "TypeError: countries.map is not a function"
- onClick function call from another file
- Firebase Data consumtion
- Adding multiple <script>s to a specific page in Gatsby
- How can I select all text in a div after focusing using a ref in react?
- React router not showing a page
- Initialize state before mapStateToProps?
- How to combine Material-UI's snackbar and input components in react?
- React JSX code not compiling
- react Maximum call stack size exceeded
- How to get text() of Child Component in Enzyme / React
- React Input onChange before onKeyDown
- What is the best way to test React component exported in withRouter()
- this.props.function() is undefined in React app?