Render route conditional rendering. React router (hashrouter)
I'm using Hashrouter component of React Router to render my different routes in a React application. In order to avoid duplicating code, I created a couple of components called TopBar and Footer, as the name suggests it renders this two elements in the website. My problem comes when I want to add another route for an admin page which I DON'T WANT to have TopBar neither Footer. Since the path is matching with '/' it is obviously showing both components along with the AdminFrame component.
I have a couple of workaround solutions in mind but I would like to know if there's any plain and easy solution to this problem without changing any route in this structure:
<HashRouter>
<div>
<Route path="/" render={()=> (
<TopBar/>
)} />
<Route exact path="/" render={() => (
<Home />
)} />
<Route exact path="/contacto" render={() => (
<Contact />
)} />
<Route path="/" render={()=> (
<Footer/>
)} />
<Route path="/admin" render={()=> (
<AdminFrame/>
)} />
</div>
</HashRouter>
Any help appreciated.
reactjs react-router react-router-dom
asked Nov 22 '18 at 23:49
Robert VeraRobert Vera
62
add a comment |
I'm using Hashrouter component of React Router to render my different routes in a React application. In order to avoid duplicating code, I created a couple of components called TopBar and Footer, as the name suggests it renders this two elements in the website. My problem comes when I want to add another route for an admin page which I DON'T WANT to have TopBar neither Footer. Since the path is matching with '/' it is obviously showing both components along with the AdminFrame component.
I have a couple of workaround solutions in mind but I would like to know if there's any plain and easy solution to this problem without changing any route in this structure:
<HashRouter>
<div>
<Route path="/" render={()=> (
<TopBar/>
)} />
<Route exact path="/" render={() => (
<Home />
)} />
<Route exact path="/contacto" render={() => (
<Contact />
)} />
<Route path="/" render={()=> (
<Footer/>
)} />
<Route path="/admin" render={()=> (
<AdminFrame/>
)} />
</div>
</HashRouter>
Any help appreciated.
reactjs react-router react-router-dom
asked Nov 22 '18 at 23:49
Robert VeraRobert Vera
62
add a comment |
I'm using Hashrouter component of React Router to render my different routes in a React application. In order to avoid duplicating code, I created a couple of components called TopBar and Footer, as the name suggests it renders this two elements in the website. My problem comes when I want to add another route for an admin page which I DON'T WANT to have TopBar neither Footer. Since the path is matching with '/' it is obviously showing both components along with the AdminFrame component.
I have a couple of workaround solutions in mind but I would like to know if there's any plain and easy solution to this problem without changing any route in this structure:
<HashRouter>
<div>
<Route path="/" render={()=> (
<TopBar/>
)} />
<Route exact path="/" render={() => (
<Home />
)} />
<Route exact path="/contacto" render={() => (
<Contact />
)} />
<Route path="/" render={()=> (
<Footer/>
)} />
<Route path="/admin" render={()=> (
<AdminFrame/>
)} />
</div>
</HashRouter>
Any help appreciated.
reactjs react-router react-router-dom
asked Nov 22 '18 at 23:49
Robert VeraRobert Vera
62
I'm using Hashrouter component of React Router to render my different routes in a React application. In order to avoid duplicating code, I created a couple of components called TopBar and Footer, as the name suggests it renders this two elements in the website. My problem comes when I want to add another route for an admin page which I DON'T WANT to have TopBar neither Footer. Since the path is matching with '/' it is obviously showing both components along with the AdminFrame component.
I have a couple of workaround solutions in mind but I would like to know if there's any plain and easy solution to this problem without changing any route in this structure:
<HashRouter>
<div>
<Route path="/" render={()=> (
<TopBar/>
)} />
<Route exact path="/" render={() => (
<Home />
)} />
<Route exact path="/contacto" render={() => (
<Contact />
)} />
<Route path="/" render={()=> (
<Footer/>
)} />
<Route path="/admin" render={()=> (
<AdminFrame/>
)} />
</div>
</HashRouter>
Any help appreciated.
reactjs react-router react-router-dom
reactjs react-router react-router-dom
asked Nov 22 '18 at 23:49
Robert VeraRobert Vera
62
asked Nov 22 '18 at 23:49
Robert VeraRobert Vera
62
asked Nov 22 '18 at 23:49
Robert VeraRobert Vera
62
asked Nov 22 '18 at 23:49
Robert VeraRobert Vera
62
asked Nov 22 '18 at 23:49
Robert VeraRobert Vera
62
62
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
If the Topbar and Footer is shown only on the homepage, you might consider just putting TopBar and Footer somewhere in the Home component instead. If you still need the Topbar and Footer i'd go with a Switch to organize the routes better:
<HashRouter>
<div>
<Route exact path="/" render={()=> (
<TopBar/>
)} />
<Route exact path="/" render={()=> (
<Footer/>
)} />
<Switch>
<Route path="/contacto" render={() => (
<Contact />
)} />
<Route path="/admin" render={()=> (
<AdminFrame/>
)} />
<Route path="/" render={() => (
<Home />
)} />
</Switch>
</div>
</HashRouter>
Switch renders only the first matching route.
answered Nov 22 '18 at 23:59
Shawn AndrewsShawn Andrews
965617
1
Thanks Shawn, I finally changed the approach. placing TopBar and Footer in each component needed.
– Robert Vera
Jan 20 at 10:35
Awesome im glad to hear :D
– Shawn Andrews
Jan 20 at 17:59
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',
autoActivateHeartbeat: false,
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
});
}
});
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%2f53439184%2frender-route-conditional-rendering-react-router-hashrouter%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
If the Topbar and Footer is shown only on the homepage, you might consider just putting TopBar and Footer somewhere in the Home component instead. If you still need the Topbar and Footer i'd go with a Switch to organize the routes better:
<HashRouter>
<div>
<Route exact path="/" render={()=> (
<TopBar/>
)} />
<Route exact path="/" render={()=> (
<Footer/>
)} />
<Switch>
<Route path="/contacto" render={() => (
<Contact />
)} />
<Route path="/admin" render={()=> (
<AdminFrame/>
)} />
<Route path="/" render={() => (
<Home />
)} />
</Switch>
</div>
</HashRouter>
Switch renders only the first matching route.
answered Nov 22 '18 at 23:59
Shawn AndrewsShawn Andrews
965617
1
Thanks Shawn, I finally changed the approach. placing TopBar and Footer in each component needed.
– Robert Vera
Jan 20 at 10:35
Awesome im glad to hear :D
– Shawn Andrews
Jan 20 at 17:59
add a comment |
If the Topbar and Footer is shown only on the homepage, you might consider just putting TopBar and Footer somewhere in the Home component instead. If you still need the Topbar and Footer i'd go with a Switch to organize the routes better:
<HashRouter>
<div>
<Route exact path="/" render={()=> (
<TopBar/>
)} />
<Route exact path="/" render={()=> (
<Footer/>
)} />
<Switch>
<Route path="/contacto" render={() => (
<Contact />
)} />
<Route path="/admin" render={()=> (
<AdminFrame/>
)} />
<Route path="/" render={() => (
<Home />
)} />
</Switch>
</div>
</HashRouter>
Switch renders only the first matching route.
answered Nov 22 '18 at 23:59
Shawn AndrewsShawn Andrews
965617
1
Thanks Shawn, I finally changed the approach. placing TopBar and Footer in each component needed.
– Robert Vera
Jan 20 at 10:35
Awesome im glad to hear :D
– Shawn Andrews
Jan 20 at 17:59
add a comment |
If the Topbar and Footer is shown only on the homepage, you might consider just putting TopBar and Footer somewhere in the Home component instead. If you still need the Topbar and Footer i'd go with a Switch to organize the routes better:
<HashRouter>
<div>
<Route exact path="/" render={()=> (
<TopBar/>
)} />
<Route exact path="/" render={()=> (
<Footer/>
)} />
<Switch>
<Route path="/contacto" render={() => (
<Contact />
)} />
<Route path="/admin" render={()=> (
<AdminFrame/>
)} />
<Route path="/" render={() => (
<Home />
)} />
</Switch>
</div>
</HashRouter>
Switch renders only the first matching route.
answered Nov 22 '18 at 23:59
Shawn AndrewsShawn Andrews
965617
If the Topbar and Footer is shown only on the homepage, you might consider just putting TopBar and Footer somewhere in the Home component instead. If you still need the Topbar and Footer i'd go with a Switch to organize the routes better:
<HashRouter>
<div>
<Route exact path="/" render={()=> (
<TopBar/>
)} />
<Route exact path="/" render={()=> (
<Footer/>
)} />
<Switch>
<Route path="/contacto" render={() => (
<Contact />
)} />
<Route path="/admin" render={()=> (
<AdminFrame/>
)} />
<Route path="/" render={() => (
<Home />
)} />
</Switch>
</div>
</HashRouter>
Switch renders only the first matching route.
answered Nov 22 '18 at 23:59
Shawn AndrewsShawn Andrews
965617
answered Nov 22 '18 at 23:59
Shawn AndrewsShawn Andrews
965617
answered Nov 22 '18 at 23:59
Shawn AndrewsShawn Andrews
965617
answered Nov 22 '18 at 23:59
Shawn AndrewsShawn Andrews
965617
965617
1
Thanks Shawn, I finally changed the approach. placing TopBar and Footer in each component needed.
– Robert Vera
Jan 20 at 10:35
Awesome im glad to hear :D
– Shawn Andrews
Jan 20 at 17:59
add a comment |
1
Thanks Shawn, I finally changed the approach. placing TopBar and Footer in each component needed.
– Robert Vera
Jan 20 at 10:35
Awesome im glad to hear :D
– Shawn Andrews
Jan 20 at 17:59
1
1
Thanks Shawn, I finally changed the approach. placing TopBar and Footer in each component needed.
– Robert Vera
Jan 20 at 10:35
Thanks Shawn, I finally changed the approach. placing TopBar and Footer in each component needed.
– Robert Vera
Jan 20 at 10:35
Awesome im glad to hear :D
– Shawn Andrews
Jan 20 at 17:59
Awesome im glad to hear :D
– Shawn Andrews
Jan 20 at 17:59
add a comment |
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.
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%2f53439184%2frender-route-conditional-rendering-react-router-hashrouter%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
