score:1
in your index.js
file
<router history={hashhistory} >
<route path="/" component={layout} >
<indexroute component={index} ></indexroute>
<route path="lesson" name="lesson" component={lesson} ></route>
</route>
</router>
<route path="/" component={layout} >
acts as the parent route and all other routes are its sub-routes
. and its using layout
component
so even when you change the route, the parent component
remains there and the component of new route is passed to the parent component layout
as a children
, but you're not rendering children in your layout
component.
so, in your layout.js
file, add this line {this.props.children}
, example
return (
<div>
<header />
<container />
{this.props.children}
</div>
);
you can re-arrange it to suit your needs, but add {this.props.children}
wherever you want to render the child components passed to it.
edit
i think you're complicating things, anyways you could do this
in layout.js
, you can pass the children to your container like
<container>
{this.props.children}
</container>
and in container.js
pass the children using same technique
<main>
{this.props.children}
</main>
and in main.js
render() {
return (
<main classname={this.maincontentplaceholder} id="main-content-placeholder">
<overlay />
<div classname="col-xs-12 col-sm-12 col-md-12 col-lg-12 center-col">
{this.props.children}
</div>
</main>
);
remember to use classname prop instead of using class, in react jsx
if you want to set class
on an element
you have to use classname
prop instead of class
prop
note: i think it would be best if you can place all the visual elements in your layout file, like header
, navigation
, sidebar
, footer
and then place this.props.children
in a wrapper div
, so the content within the wrapper will keep changing as you navigate between different routes., and you can update the header, navigation, aside, etc data, active states using your store.
Source: stackoverflow.com
Related Query
- Pass props to children with react router
- React router 1.0 pass multiple props to children routes
- can we pass props to another react router page without context and redux?
- How can I pass props from one component to another using Link and router in react
- Passing props to React Router children routes
- Pass Props to Outlet in React Router v6
- React router - pass props on routes to child components
- React router pass props to route component
- how to pass props to the route when using react router <Link>
- Pass two children as props to a React component
- Passing props from react router to children on the server
- Pass props down in Redux React app with React Router
- How to pass data from a page to another page using react router
- Pass props to a component, React Router V4
- Pass state to a component in another file in react
- Pass function by props in react router
- react router - pass props via url arguments
- React pass props to children
- React router v6 access route params and pass as props
- How to pass parameters in React Function From 1 file to another
- React TS Generic component to pass generic props to children
- How can I pass props to children of React Router?
- How to pass value of a const from one .js file to another in React JS?
- Pass props React Router
- How to pass props using react router link v6?
- Pass props from react router Link in reactJS
- How to pass props to route in react router v5 with Typescript?
- React Redux Router pass props
- React Router 4 Pass props to dynamic component
- How to pass props to children components in React
More Query from same tag
- How to change NODE_ENV when building app with webpack?
- How can I add conditions to my input in react?
- 500 Error and Unexpected token < in JSON at position 0 when deployed MERN on Heroku
- React Js: Uncaught (in promise) SyntaxError:
- How to rerender parent component after receiving child's ref with useRef hook?
- How to wrap Carousel.Item in other component
- Detect Function If Being Called In Another Component in React
- get values of row-inputs in table React
- Will ReactDOM.hydrate() trigger lifecycle methods on the client?
- Invoking child methods with Function Components and Hooks in React
- React - handleChange method not firing causing selected option name not to update
- React JSX expression for className is not evaluated at runtime
- Do react hooks work via CDN links in a simple single html file?
- Passing parameters to reduce function
- How can I re-fetch an API using react hooks
- --Is it possible to detect the ID of the element clicked with React?
- "React.Children.only expected to receive a single React element child" error when putting <Image> and <TouchableHighlight> in a <View>
- ReactJs Create Reusable component with multiple different children
- react / css - transform animation - move an element when click
- Environment variables - undefined
- ReactJS Dialog with close button
- Sending an email from the browser using js
- React Dom is undefined
- How do I export "user" object from my TopBar.js to App.js?
- React doesn't update component state when user changes input
- avoid opening new window when downloading s3 object
- React: Redirect based on flag: 'redirect' flag should be set to true, yet flag appears false at all times
- update nested state object with array inside
- get url variables from inside Route
- Preact map array of data