Nested React Router : hide parent component on showing nested child component
up vote
0
down vote
favorite
Being a beginner in reactJS, I want to know how to hide parent component when i route to child component URL
Assume a scenario:
User is at "/house" as this:
<Route path="/house" component={House} />
when user clicks a house grid he navigates to "/house/flat/:flatID". Inside House component
<Route
path={`${this.props.match.url}/flat/:flatId`}
render={() => <div>Each Flat details</div>}
/>
then both child and parent components are visible like this:
So what i want is to show only flat component when user navigates to "/house/flat:FlatId". Please suggest me anything that helps ! Any links to article so that i can learn and achieve such functionality.
Code:
App.js
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/account" component={Account} />
<Route path="/gharjagga" component={GharJagga} />
</Switch>
House.js
onGharGridClick= id => {
<Redirect to={`${this.props.match.url}/flat/${id}`} />;
};
return (
<Route
path={`${this.props.match.url}/flat/:fkatId`}
render={() => <div>Ghar Each</div>}
/>
);
javascript reactjs react-router-dom
asked Nov 10 at 5:34
Efrain Sanjay Adhikary
204316
add a comment |
up vote
0
down vote
favorite
Being a beginner in reactJS, I want to know how to hide parent component when i route to child component URL
Assume a scenario:
User is at "/house" as this:
<Route path="/house" component={House} />
when user clicks a house grid he navigates to "/house/flat/:flatID". Inside House component
<Route
path={`${this.props.match.url}/flat/:flatId`}
render={() => <div>Each Flat details</div>}
/>
then both child and parent components are visible like this:
So what i want is to show only flat component when user navigates to "/house/flat:FlatId". Please suggest me anything that helps ! Any links to article so that i can learn and achieve such functionality.
Code:
App.js
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/account" component={Account} />
<Route path="/gharjagga" component={GharJagga} />
</Switch>
House.js
onGharGridClick= id => {
<Redirect to={`${this.props.match.url}/flat/${id}`} />;
};
return (
<Route
path={`${this.props.match.url}/flat/:fkatId`}
render={() => <div>Ghar Each</div>}
/>
);
javascript reactjs react-router-dom
asked Nov 10 at 5:34
Efrain Sanjay Adhikary
204316
You want switch route right? Or Please share you route s code
– Hafeez Hamza
Nov 10 at 5:39
when user clicks any grid he navigates to /house/flat/flatID then what i want to show in this url is only flat details, instead both House and flat Details are showing.
– Efrain Sanjay Adhikary
Nov 10 at 5:46
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
Being a beginner in reactJS, I want to know how to hide parent component when i route to child component URL
Assume a scenario:
User is at "/house" as this:
<Route path="/house" component={House} />
when user clicks a house grid he navigates to "/house/flat/:flatID". Inside House component
<Route
path={`${this.props.match.url}/flat/:flatId`}
render={() => <div>Each Flat details</div>}
/>
then both child and parent components are visible like this:
So what i want is to show only flat component when user navigates to "/house/flat:FlatId". Please suggest me anything that helps ! Any links to article so that i can learn and achieve such functionality.
Code:
App.js
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/account" component={Account} />
<Route path="/gharjagga" component={GharJagga} />
</Switch>
House.js
onGharGridClick= id => {
<Redirect to={`${this.props.match.url}/flat/${id}`} />;
};
return (
<Route
path={`${this.props.match.url}/flat/:fkatId`}
render={() => <div>Ghar Each</div>}
/>
);
javascript reactjs react-router-dom
asked Nov 10 at 5:34
Efrain Sanjay Adhikary
204316
Being a beginner in reactJS, I want to know how to hide parent component when i route to child component URL
Assume a scenario:
User is at "/house" as this:
<Route path="/house" component={House} />
when user clicks a house grid he navigates to "/house/flat/:flatID". Inside House component
<Route
path={`${this.props.match.url}/flat/:flatId`}
render={() => <div>Each Flat details</div>}
/>
then both child and parent components are visible like this:
So what i want is to show only flat component when user navigates to "/house/flat:FlatId". Please suggest me anything that helps ! Any links to article so that i can learn and achieve such functionality.
Code:
App.js
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/account" component={Account} />
<Route path="/gharjagga" component={GharJagga} />
</Switch>
House.js
onGharGridClick= id => {
<Redirect to={`${this.props.match.url}/flat/${id}`} />;
};
return (
<Route
path={`${this.props.match.url}/flat/:fkatId`}
render={() => <div>Ghar Each</div>}
/>
);
javascript reactjs react-router-dom
javascript reactjs react-router-dom
asked Nov 10 at 5:34
Efrain Sanjay Adhikary
204316
asked Nov 10 at 5:34
Efrain Sanjay Adhikary
204316
edited Nov 10 at 6:03
asked Nov 10 at 5:34
Efrain Sanjay Adhikary
204316
asked Nov 10 at 5:34
Efrain Sanjay Adhikary
204316
asked Nov 10 at 5:34
Efrain Sanjay Adhikary
204316
204316
You want switch route right? Or Please share you route s code
– Hafeez Hamza
Nov 10 at 5:39
when user clicks any grid he navigates to /house/flat/flatID then what i want to show in this url is only flat details, instead both House and flat Details are showing.
– Efrain Sanjay Adhikary
Nov 10 at 5:46
add a comment |
You want switch route right? Or Please share you route s code
– Hafeez Hamza
Nov 10 at 5:39
when user clicks any grid he navigates to /house/flat/flatID then what i want to show in this url is only flat details, instead both House and flat Details are showing.
– Efrain Sanjay Adhikary
Nov 10 at 5:46
You want switch route right? Or Please share you route s code
– Hafeez Hamza
Nov 10 at 5:39
You want switch route right? Or Please share you route s code
– Hafeez Hamza
Nov 10 at 5:39
when user clicks any grid he navigates to /house/flat/flatID then what i want to show in this url is only flat details, instead both House and flat Details are showing.
– Efrain Sanjay Adhikary
Nov 10 at 5:46
when user clicks any grid he navigates to /house/flat/flatID then what i want to show in this url is only flat details, instead both House and flat Details are showing.
– Efrain Sanjay Adhikary
Nov 10 at 5:46
add a comment |
2 Answers
2
active
oldest
votes
up vote
1
down vote
accepted
You can achieve it different ways
- define routes in the parent component, I think this is the best option.
<Switch>
<Route path="/account" component={Account} />
<Route path="/house/flat/:flatId" component={FlatComponent}/>
<Route path="/house" component={House} />
<Route path="/" component={Home} />
</Switch>Note: instead of using exact, order your routes based on priority, that will make the route to redirect to next matching route if any typo in the route entered
- You can make House as separate route component, and nest the routes inside that component
// ROutes
<Switch>
<Route path="/account" component={Account} />
<Route path="/house" component={House} />
<Route path="/" component={Home} />
</Switch>
// House component
class House extends React. Components {
render() {
return (
<Switch>
<Route path="/house/flat/:flatId" render={() => <div>Each Flat details</div>} />}/>
<Route path="/house" component={HouseGridComponent} />
</Switch>
)
}
}- you can check whether the route has
flatIdand hide the elements, in your House component you can checkthis.props.match.params.flatId, if theflatIdis set you can hide that House Component.
// House Component
class House extends React. Components {
render() {
return (
<div>
{
!this.props.match.params.flatId?
<h1>House Component</h1>:
null
}
<Route path={`${this.props.match.url}/flat/:flatId`} render={() => <div>Each Flat details</div>} />
</div>
)
}
}answered Nov 10 at 6:10
Hafeez Hamza
317110
ok i got what you are trying to convey ! but when house component is rendered, i fetch all the data and when user clicks any grid (house) then the data of that house has to be passed into the flat component , do you understand my scenario?
– Efrain Sanjay Adhikary
Nov 10 at 6:17
so i cant fetch the data from parent component ! and i have to pass props to flat from house
– Efrain Sanjay Adhikary
Nov 10 at 6:18
You can use second option for that
– Hafeez Hamza
Nov 10 at 6:21
is this the best options ? aren't there any solutions to only route to the child component only instead of both parents and child component
– Efrain Sanjay Adhikary
Nov 10 at 6:27
1
Try the new second option that would be much better, also best practice, I forgot to add that before
– Hafeez Hamza
Nov 10 at 6:44
|
show 1 more comment
up vote
2
down vote
The solution is raise "/house/flat/:flatId" to the same level as "/house".
<Switch>
<Route exact path="/" component={Home} />
<Route path="/account" component={Account} />
<Route path="/house/flat/:flatId" render={() => <div>Each Flat details</div>}/>
<Route path="/house" component={House} />
</Switch>
answered Nov 10 at 6:02
Arman Charan
3,13711020
but i want to pass the props from House component to Flat Component as well , and thanks for this ! very close to the solutions
– Efrain Sanjay Adhikary
Nov 10 at 6:04
You'll have to store and retrieve the data in/from a common ancestor. See Lifting State Up for more info @EfrainSanjayAdhikary
– Arman Charan
Nov 10 at 6:07
they both are inside app.js ! isn't it be too heavy to load everything in app.js and shared into flat and House.
– Efrain Sanjay Adhikary
Nov 10 at 6:12
2
Nah, the overhead is negligible. You could alternatively nest"/"and"/flat/:flatId"subroutes within"/house"if you want to manage thestatein a purer manner. The fundamental steps/logic are the same either way @EfrainSanjayAdhikary
– Arman Charan
Nov 10 at 6:26
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53236282%2fnested-react-router-hide-parent-component-on-showing-nested-child-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
You can achieve it different ways
- define routes in the parent component, I think this is the best option.
<Switch>
<Route path="/account" component={Account} />
<Route path="/house/flat/:flatId" component={FlatComponent}/>
<Route path="/house" component={House} />
<Route path="/" component={Home} />
</Switch>Note: instead of using exact, order your routes based on priority, that will make the route to redirect to next matching route if any typo in the route entered
- You can make House as separate route component, and nest the routes inside that component
// ROutes
<Switch>
<Route path="/account" component={Account} />
<Route path="/house" component={House} />
<Route path="/" component={Home} />
</Switch>
// House component
class House extends React. Components {
render() {
return (
<Switch>
<Route path="/house/flat/:flatId" render={() => <div>Each Flat details</div>} />}/>
<Route path="/house" component={HouseGridComponent} />
</Switch>
)
}
}- you can check whether the route has
flatIdand hide the elements, in your House component you can checkthis.props.match.params.flatId, if theflatIdis set you can hide that House Component.
// House Component
class House extends React. Components {
render() {
return (
<div>
{
!this.props.match.params.flatId?
<h1>House Component</h1>:
null
}
<Route path={`${this.props.match.url}/flat/:flatId`} render={() => <div>Each Flat details</div>} />
</div>
)
}
}answered Nov 10 at 6:10
Hafeez Hamza
317110
ok i got what you are trying to convey ! but when house component is rendered, i fetch all the data and when user clicks any grid (house) then the data of that house has to be passed into the flat component , do you understand my scenario?
– Efrain Sanjay Adhikary
Nov 10 at 6:17
so i cant fetch the data from parent component ! and i have to pass props to flat from house
– Efrain Sanjay Adhikary
Nov 10 at 6:18
You can use second option for that
– Hafeez Hamza
Nov 10 at 6:21
is this the best options ? aren't there any solutions to only route to the child component only instead of both parents and child component
– Efrain Sanjay Adhikary
Nov 10 at 6:27
1
Try the new second option that would be much better, also best practice, I forgot to add that before
– Hafeez Hamza
Nov 10 at 6:44
|
show 1 more comment
up vote
1
down vote
accepted
You can achieve it different ways
- define routes in the parent component, I think this is the best option.
<Switch>
<Route path="/account" component={Account} />
<Route path="/house/flat/:flatId" component={FlatComponent}/>
<Route path="/house" component={House} />
<Route path="/" component={Home} />
</Switch>Note: instead of using exact, order your routes based on priority, that will make the route to redirect to next matching route if any typo in the route entered
- You can make House as separate route component, and nest the routes inside that component
// ROutes
<Switch>
<Route path="/account" component={Account} />
<Route path="/house" component={House} />
<Route path="/" component={Home} />
</Switch>
// House component
class House extends React. Components {
render() {
return (
<Switch>
<Route path="/house/flat/:flatId" render={() => <div>Each Flat details</div>} />}/>
<Route path="/house" component={HouseGridComponent} />
</Switch>
)
}
}- you can check whether the route has
flatIdand hide the elements, in your House component you can checkthis.props.match.params.flatId, if theflatIdis set you can hide that House Component.
// House Component
class House extends React. Components {
render() {
return (
<div>
{
!this.props.match.params.flatId?
<h1>House Component</h1>:
null
}
<Route path={`${this.props.match.url}/flat/:flatId`} render={() => <div>Each Flat details</div>} />
</div>
)
}
}answered Nov 10 at 6:10
Hafeez Hamza
317110
ok i got what you are trying to convey ! but when house component is rendered, i fetch all the data and when user clicks any grid (house) then the data of that house has to be passed into the flat component , do you understand my scenario?
– Efrain Sanjay Adhikary
Nov 10 at 6:17
so i cant fetch the data from parent component ! and i have to pass props to flat from house
– Efrain Sanjay Adhikary
Nov 10 at 6:18
You can use second option for that
– Hafeez Hamza
Nov 10 at 6:21
is this the best options ? aren't there any solutions to only route to the child component only instead of both parents and child component
– Efrain Sanjay Adhikary
Nov 10 at 6:27
1
Try the new second option that would be much better, also best practice, I forgot to add that before
– Hafeez Hamza
Nov 10 at 6:44
|
show 1 more comment
up vote
1
down vote
accepted
up vote
1
down vote
accepted
You can achieve it different ways
- define routes in the parent component, I think this is the best option.
<Switch>
<Route path="/account" component={Account} />
<Route path="/house/flat/:flatId" component={FlatComponent}/>
<Route path="/house" component={House} />
<Route path="/" component={Home} />
</Switch>Note: instead of using exact, order your routes based on priority, that will make the route to redirect to next matching route if any typo in the route entered
- You can make House as separate route component, and nest the routes inside that component
// ROutes
<Switch>
<Route path="/account" component={Account} />
<Route path="/house" component={House} />
<Route path="/" component={Home} />
</Switch>
// House component
class House extends React. Components {
render() {
return (
<Switch>
<Route path="/house/flat/:flatId" render={() => <div>Each Flat details</div>} />}/>
<Route path="/house" component={HouseGridComponent} />
</Switch>
)
}
}- you can check whether the route has
flatIdand hide the elements, in your House component you can checkthis.props.match.params.flatId, if theflatIdis set you can hide that House Component.
// House Component
class House extends React. Components {
render() {
return (
<div>
{
!this.props.match.params.flatId?
<h1>House Component</h1>:
null
}
<Route path={`${this.props.match.url}/flat/:flatId`} render={() => <div>Each Flat details</div>} />
</div>
)
}
}answered Nov 10 at 6:10
Hafeez Hamza
317110
You can achieve it different ways
- define routes in the parent component, I think this is the best option.
<Switch>
<Route path="/account" component={Account} />
<Route path="/house/flat/:flatId" component={FlatComponent}/>
<Route path="/house" component={House} />
<Route path="/" component={Home} />
</Switch>Note: instead of using exact, order your routes based on priority, that will make the route to redirect to next matching route if any typo in the route entered
- You can make House as separate route component, and nest the routes inside that component
// ROutes
<Switch>
<Route path="/account" component={Account} />
<Route path="/house" component={House} />
<Route path="/" component={Home} />
</Switch>
// House component
class House extends React. Components {
render() {
return (
<Switch>
<Route path="/house/flat/:flatId" render={() => <div>Each Flat details</div>} />}/>
<Route path="/house" component={HouseGridComponent} />
</Switch>
)
}
}- you can check whether the route has
flatIdand hide the elements, in your House component you can checkthis.props.match.params.flatId, if theflatIdis set you can hide that House Component.
// House Component
class House extends React. Components {
render() {
return (
<div>
{
!this.props.match.params.flatId?
<h1>House Component</h1>:
null
}
<Route path={`${this.props.match.url}/flat/:flatId`} render={() => <div>Each Flat details</div>} />
</div>
)
}
}<Switch>
<Route path="/account" component={Account} />
<Route path="/house/flat/:flatId" component={FlatComponent}/>
<Route path="/house" component={House} />
<Route path="/" component={Home} />
</Switch><Switch>
<Route path="/account" component={Account} />
<Route path="/house/flat/:flatId" component={FlatComponent}/>
<Route path="/house" component={House} />
<Route path="/" component={Home} />
</Switch>// ROutes
<Switch>
<Route path="/account" component={Account} />
<Route path="/house" component={House} />
<Route path="/" component={Home} />
</Switch>
// House component
class House extends React. Components {
render() {
return (
<Switch>
<Route path="/house/flat/:flatId" render={() => <div>Each Flat details</div>} />}/>
<Route path="/house" component={HouseGridComponent} />
</Switch>
)
}
}// ROutes
<Switch>
<Route path="/account" component={Account} />
<Route path="/house" component={House} />
<Route path="/" component={Home} />
</Switch>
// House component
class House extends React. Components {
render() {
return (
<Switch>
<Route path="/house/flat/:flatId" render={() => <div>Each Flat details</div>} />}/>
<Route path="/house" component={HouseGridComponent} />
</Switch>
)
}
}// House Component
class House extends React. Components {
render() {
return (
<div>
{
!this.props.match.params.flatId?
<h1>House Component</h1>:
null
}
<Route path={`${this.props.match.url}/flat/:flatId`} render={() => <div>Each Flat details</div>} />
</div>
)
}
}// House Component
class House extends React. Components {
render() {
return (
<div>
{
!this.props.match.params.flatId?
<h1>House Component</h1>:
null
}
<Route path={`${this.props.match.url}/flat/:flatId`} render={() => <div>Each Flat details</div>} />
</div>
)
}
}answered Nov 10 at 6:10
Hafeez Hamza
317110
edited Nov 10 at 6:42
answered Nov 10 at 6:10
Hafeez Hamza
317110
answered Nov 10 at 6:10
Hafeez Hamza
317110
answered Nov 10 at 6:10
Hafeez Hamza
317110
317110
ok i got what you are trying to convey ! but when house component is rendered, i fetch all the data and when user clicks any grid (house) then the data of that house has to be passed into the flat component , do you understand my scenario?
– Efrain Sanjay Adhikary
Nov 10 at 6:17
so i cant fetch the data from parent component ! and i have to pass props to flat from house
– Efrain Sanjay Adhikary
Nov 10 at 6:18
You can use second option for that
– Hafeez Hamza
Nov 10 at 6:21
is this the best options ? aren't there any solutions to only route to the child component only instead of both parents and child component
– Efrain Sanjay Adhikary
Nov 10 at 6:27
1
Try the new second option that would be much better, also best practice, I forgot to add that before
– Hafeez Hamza
Nov 10 at 6:44
|
show 1 more comment
ok i got what you are trying to convey ! but when house component is rendered, i fetch all the data and when user clicks any grid (house) then the data of that house has to be passed into the flat component , do you understand my scenario?
– Efrain Sanjay Adhikary
Nov 10 at 6:17
so i cant fetch the data from parent component ! and i have to pass props to flat from house
– Efrain Sanjay Adhikary
Nov 10 at 6:18
You can use second option for that
– Hafeez Hamza
Nov 10 at 6:21
is this the best options ? aren't there any solutions to only route to the child component only instead of both parents and child component
– Efrain Sanjay Adhikary
Nov 10 at 6:27
1
Try the new second option that would be much better, also best practice, I forgot to add that before
– Hafeez Hamza
Nov 10 at 6:44
ok i got what you are trying to convey ! but when house component is rendered, i fetch all the data and when user clicks any grid (house) then the data of that house has to be passed into the flat component , do you understand my scenario?
– Efrain Sanjay Adhikary
Nov 10 at 6:17
ok i got what you are trying to convey ! but when house component is rendered, i fetch all the data and when user clicks any grid (house) then the data of that house has to be passed into the flat component , do you understand my scenario?
– Efrain Sanjay Adhikary
Nov 10 at 6:17
so i cant fetch the data from parent component ! and i have to pass props to flat from house
– Efrain Sanjay Adhikary
Nov 10 at 6:18
so i cant fetch the data from parent component ! and i have to pass props to flat from house
– Efrain Sanjay Adhikary
Nov 10 at 6:18
You can use second option for that
– Hafeez Hamza
Nov 10 at 6:21
You can use second option for that
– Hafeez Hamza
Nov 10 at 6:21
is this the best options ? aren't there any solutions to only route to the child component only instead of both parents and child component
– Efrain Sanjay Adhikary
Nov 10 at 6:27
is this the best options ? aren't there any solutions to only route to the child component only instead of both parents and child component
– Efrain Sanjay Adhikary
Nov 10 at 6:27
1
1
Try the new second option that would be much better, also best practice, I forgot to add that before
– Hafeez Hamza
Nov 10 at 6:44
Try the new second option that would be much better, also best practice, I forgot to add that before
– Hafeez Hamza
Nov 10 at 6:44
|
show 1 more comment
up vote
2
down vote
The solution is raise "/house/flat/:flatId" to the same level as "/house".
<Switch>
<Route exact path="/" component={Home} />
<Route path="/account" component={Account} />
<Route path="/house/flat/:flatId" render={() => <div>Each Flat details</div>}/>
<Route path="/house" component={House} />
</Switch>
answered Nov 10 at 6:02
Arman Charan
3,13711020
but i want to pass the props from House component to Flat Component as well , and thanks for this ! very close to the solutions
– Efrain Sanjay Adhikary
Nov 10 at 6:04
You'll have to store and retrieve the data in/from a common ancestor. See Lifting State Up for more info @EfrainSanjayAdhikary
– Arman Charan
Nov 10 at 6:07
they both are inside app.js ! isn't it be too heavy to load everything in app.js and shared into flat and House.
– Efrain Sanjay Adhikary
Nov 10 at 6:12
2
Nah, the overhead is negligible. You could alternatively nest"/"and"/flat/:flatId"subroutes within"/house"if you want to manage thestatein a purer manner. The fundamental steps/logic are the same either way @EfrainSanjayAdhikary
– Arman Charan
Nov 10 at 6:26
add a comment |
up vote
2
down vote
The solution is raise "/house/flat/:flatId" to the same level as "/house".
<Switch>
<Route exact path="/" component={Home} />
<Route path="/account" component={Account} />
<Route path="/house/flat/:flatId" render={() => <div>Each Flat details</div>}/>
<Route path="/house" component={House} />
</Switch>
answered Nov 10 at 6:02
Arman Charan
3,13711020
but i want to pass the props from House component to Flat Component as well , and thanks for this ! very close to the solutions
– Efrain Sanjay Adhikary
Nov 10 at 6:04
You'll have to store and retrieve the data in/from a common ancestor. See Lifting State Up for more info @EfrainSanjayAdhikary
– Arman Charan
Nov 10 at 6:07
they both are inside app.js ! isn't it be too heavy to load everything in app.js and shared into flat and House.
– Efrain Sanjay Adhikary
Nov 10 at 6:12
2
Nah, the overhead is negligible. You could alternatively nest"/"and"/flat/:flatId"subroutes within"/house"if you want to manage thestatein a purer manner. The fundamental steps/logic are the same either way @EfrainSanjayAdhikary
– Arman Charan
Nov 10 at 6:26
add a comment |
up vote
2
down vote
up vote
2
down vote
The solution is raise "/house/flat/:flatId" to the same level as "/house".
<Switch>
<Route exact path="/" component={Home} />
<Route path="/account" component={Account} />
<Route path="/house/flat/:flatId" render={() => <div>Each Flat details</div>}/>
<Route path="/house" component={House} />
</Switch>
answered Nov 10 at 6:02
Arman Charan
3,13711020
The solution is raise "/house/flat/:flatId" to the same level as "/house".
<Switch>
<Route exact path="/" component={Home} />
<Route path="/account" component={Account} />
<Route path="/house/flat/:flatId" render={() => <div>Each Flat details</div>}/>
<Route path="/house" component={House} />
</Switch>
answered Nov 10 at 6:02
Arman Charan
3,13711020
answered Nov 10 at 6:02
Arman Charan
3,13711020
answered Nov 10 at 6:02
Arman Charan
3,13711020
answered Nov 10 at 6:02
Arman Charan
3,13711020
3,13711020
but i want to pass the props from House component to Flat Component as well , and thanks for this ! very close to the solutions
– Efrain Sanjay Adhikary
Nov 10 at 6:04
You'll have to store and retrieve the data in/from a common ancestor. See Lifting State Up for more info @EfrainSanjayAdhikary
– Arman Charan
Nov 10 at 6:07
they both are inside app.js ! isn't it be too heavy to load everything in app.js and shared into flat and House.
– Efrain Sanjay Adhikary
Nov 10 at 6:12
2
Nah, the overhead is negligible. You could alternatively nest"/"and"/flat/:flatId"subroutes within"/house"if you want to manage thestatein a purer manner. The fundamental steps/logic are the same either way @EfrainSanjayAdhikary
– Arman Charan
Nov 10 at 6:26
add a comment |
but i want to pass the props from House component to Flat Component as well , and thanks for this ! very close to the solutions
– Efrain Sanjay Adhikary
Nov 10 at 6:04
You'll have to store and retrieve the data in/from a common ancestor. See Lifting State Up for more info @EfrainSanjayAdhikary
– Arman Charan
Nov 10 at 6:07
they both are inside app.js ! isn't it be too heavy to load everything in app.js and shared into flat and House.
– Efrain Sanjay Adhikary
Nov 10 at 6:12
2
Nah, the overhead is negligible. You could alternatively nest"/"and"/flat/:flatId"subroutes within"/house"if you want to manage thestatein a purer manner. The fundamental steps/logic are the same either way @EfrainSanjayAdhikary
– Arman Charan
Nov 10 at 6:26
but i want to pass the props from House component to Flat Component as well , and thanks for this ! very close to the solutions
– Efrain Sanjay Adhikary
Nov 10 at 6:04
but i want to pass the props from House component to Flat Component as well , and thanks for this ! very close to the solutions
– Efrain Sanjay Adhikary
Nov 10 at 6:04
You'll have to store and retrieve the data in/from a common ancestor. See Lifting State Up for more info @EfrainSanjayAdhikary
– Arman Charan
Nov 10 at 6:07
You'll have to store and retrieve the data in/from a common ancestor. See Lifting State Up for more info @EfrainSanjayAdhikary
– Arman Charan
Nov 10 at 6:07
they both are inside app.js ! isn't it be too heavy to load everything in app.js and shared into flat and House.
– Efrain Sanjay Adhikary
Nov 10 at 6:12
they both are inside app.js ! isn't it be too heavy to load everything in app.js and shared into flat and House.
– Efrain Sanjay Adhikary
Nov 10 at 6:12
2
2
Nah, the overhead is negligible. You could alternatively nest
"/" and "/flat/:flatId" subroutes within "/house" if you want to manage the state in a purer manner. The fundamental steps/logic are the same either way @EfrainSanjayAdhikary– Arman Charan
Nov 10 at 6:26
Nah, the overhead is negligible. You could alternatively nest
"/" and "/flat/:flatId" subroutes within "/house" if you want to manage the state in a purer manner. The fundamental steps/logic are the same either way @EfrainSanjayAdhikary– Arman Charan
Nov 10 at 6:26
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53236282%2fnested-react-router-hide-parent-component-on-showing-nested-child-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You want switch route right? Or Please share you route s code
– Hafeez Hamza
Nov 10 at 5:39
when user clicks any grid he navigates to /house/flat/flatID then what i want to show in this url is only flat details, instead both House and flat Details are showing.
– Efrain Sanjay Adhikary
Nov 10 at 5:46