score:1
Accepted answer
you're not passing props down to app
, so unless you use the location context, it won't have them.
you should do...
render () {
return (
<app {...this.props}/>
)
}
then, you should have access to this.props.children
in app
to render the nested route(s). you'll need to specify that in rightcontent
too...
render(){
return (
<div>
<sidebar/>
<rightcontent>
{this.props.children}
</rightcontent>
</div>
)
}
see the tutorial in the docs... https://github.com/reactjs/react-router/blob/master/docs/introduction.md#with-react-router
Source: stackoverflow.com
Related Query
- How to 1). put a div , 2). render a component without Route inside <Routes> with React Router in v6 React?
- React Router v6 : How to render multiple component inside and outside a div with the same path
- How to render different component with react router after user logged in
- With React Router : How to render a component multiple times with differents props each time in a Route?
- How to make react router work with static assets, html5 mode, history API and nested routes?
- How to test a component with a nested container with React and Redux?
- How to pass the match when using render in Route component from react router (v4)
- onEnter Transitions with React Router and Redux Simple Router Dont Render New Route's Component
- 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 load child component with props on first render with React Hooks
- issue with how to render with react router
- How to render a React component styled with Emotion in an iframe in Gatsby site?
- How to communicate from Child Component to Parent Component with React Router
- How to check the value of a nested React component in a unit test with Enzyme and Jest
- how to fetch a nested resource for every component in React router dom route
- How to use React Router to replace a Component in render method?
- Render Same Component With Multiple Paths React Router Dom
- Framer Motion and React router 5: How do I prevent re-render of parent components with nested routes?
- How to mock properly with Jest a React component using render props
- Enzyme & React router: How to shallow render a component with useHistory
- Nested React Router Component Won't Render on New Page
- Dont render Search component with Router React js
- How can I get a component to render as a parent of protected routes in react router dom?
- react router 4 - how to make a root path with nested routes but fallback to not-found
- How to render a React component with survey.js?
- How to unit test the output of a React component method in a React Router / Redux app with Enzyme
- How to link to Routes inside the component rendered by another Route with React Router
- Jest with React - How do you render an entire component and test it?
- How to test child React component created in Render with React.createElement()
- How to render a React component with Python Tornado template?
More Query from same tag
- ReactJS - Refatoring E5 class to E6 class
- action function is required with antd upload control, but I dont need it
- CreateAsyncThunk Error: Actions must be plain objects. Use custom middleware for async actions
- React Select - setState of prop
- How to make automation increment number column in datatable using typescript react?
- CORS issue making AJAX request from React app > Node server > redirect to Google OAuth2 auth
- How can I add functionality to my addition, subtraction etc buttons on react js calculator
- Type 'Element | undefined' is not assignable to type 'ReactElement<any, string | ((props: any)
- React/Material UI Dialog : how to close a dialogue
- How to render react-data-grid in non index file with exporting?
- how do I make a math Django and react web application?
- How to use Google Analytics with React?
- Page refresh error on static website in react
- Using context to pull from a store in a React page in next
- How To Make Popup Modal Appear When Clicking a Link?
- How to clear interval in functional component if interval is set in a function?
- How can I correctly pass an onChange event to multiple input checkboxes in Reactjs?
- How to connect raw html <a href> tag to React javascript?
- Input value clear - React Hooks
- useEffect is missing a dependency, but when I add it I get a 'maximum update depth exceeded' error
- Create and download image of a react component without rendering it
- how to use props to change className ? (reactjs/css)
- List always returns undefined
- How do I use property in <img src="">?
- Finishing AWS authentication flow
- Reactjs - redirect after x seconds and resetting the state
- Reactjs route for asterisk executes only once
- How to sync components sharing state hook in React
- react image upload to ASP.NET error 404 (controller never called?)
- React Router 4 organizing routes