How to make a relative route for tabs with react-router
Well consider I have the following (very simplified) tab component:
<Tabs
value={this.state.tab_idx /*will be changed to use route instead of idx*/}
onChange={this.handleChangeIndex}
indicatorColor="primary"
textColor="primary"
fullWidth
>
<Tab label="Overview" component={Link} to="overiew"/>
<Tab label="Users" component={Link} to="users"/>
<Tab label="etc" component={Link} to="etc"/>
</Tabs>
Now this is part of a document tree, so it is under the route:
SITE/organizations/organization-name
So the first should be
SITE/organizations/organization-name/overview
second
SITE/organizations/organization-name/users
etc.
Now when I use above the first will always replace the organization-name in the url. So how would I change this?
A solution would be to always include a trailing slash inside all urls. Then, as I'm currently unsure what the sub-tabs will contain, that's "not my business", clicking tabs in tandem will result in the url becoming like:
SITE/organizations/organization-name/overview/events/overview/
That's not good either. Both these solution have the added problem that they behave differently whether I go to the site by typing
SITE/organizations/organization-name and SITE/organizations/organizations-name/
Which is very bad and could confuse people.
Ideally I would define the "home" of
Site/organizations/organization-name to be Site/organizations/organization-name/overview
And have the two urls (ending with /organization-name and /overview) be aliases of each other.
reactjs react-router material-ui
asked Nov 19 at 22:11
paul23
3,16043170
add a comment |
Well consider I have the following (very simplified) tab component:
<Tabs
value={this.state.tab_idx /*will be changed to use route instead of idx*/}
onChange={this.handleChangeIndex}
indicatorColor="primary"
textColor="primary"
fullWidth
>
<Tab label="Overview" component={Link} to="overiew"/>
<Tab label="Users" component={Link} to="users"/>
<Tab label="etc" component={Link} to="etc"/>
</Tabs>
Now this is part of a document tree, so it is under the route:
SITE/organizations/organization-name
So the first should be
SITE/organizations/organization-name/overview
second
SITE/organizations/organization-name/users
etc.
Now when I use above the first will always replace the organization-name in the url. So how would I change this?
A solution would be to always include a trailing slash inside all urls. Then, as I'm currently unsure what the sub-tabs will contain, that's "not my business", clicking tabs in tandem will result in the url becoming like:
SITE/organizations/organization-name/overview/events/overview/
That's not good either. Both these solution have the added problem that they behave differently whether I go to the site by typing
SITE/organizations/organization-name and SITE/organizations/organizations-name/
Which is very bad and could confuse people.
Ideally I would define the "home" of
Site/organizations/organization-name to be Site/organizations/organization-name/overview
And have the two urls (ending with /organization-name and /overview) be aliases of each other.
reactjs react-router material-ui
asked Nov 19 at 22:11
paul23
3,16043170
add a comment |
Well consider I have the following (very simplified) tab component:
<Tabs
value={this.state.tab_idx /*will be changed to use route instead of idx*/}
onChange={this.handleChangeIndex}
indicatorColor="primary"
textColor="primary"
fullWidth
>
<Tab label="Overview" component={Link} to="overiew"/>
<Tab label="Users" component={Link} to="users"/>
<Tab label="etc" component={Link} to="etc"/>
</Tabs>
Now this is part of a document tree, so it is under the route:
SITE/organizations/organization-name
So the first should be
SITE/organizations/organization-name/overview
second
SITE/organizations/organization-name/users
etc.
Now when I use above the first will always replace the organization-name in the url. So how would I change this?
A solution would be to always include a trailing slash inside all urls. Then, as I'm currently unsure what the sub-tabs will contain, that's "not my business", clicking tabs in tandem will result in the url becoming like:
SITE/organizations/organization-name/overview/events/overview/
That's not good either. Both these solution have the added problem that they behave differently whether I go to the site by typing
SITE/organizations/organization-name and SITE/organizations/organizations-name/
Which is very bad and could confuse people.
Ideally I would define the "home" of
Site/organizations/organization-name to be Site/organizations/organization-name/overview
And have the two urls (ending with /organization-name and /overview) be aliases of each other.
reactjs react-router material-ui
asked Nov 19 at 22:11
paul23
3,16043170
Well consider I have the following (very simplified) tab component:
<Tabs
value={this.state.tab_idx /*will be changed to use route instead of idx*/}
onChange={this.handleChangeIndex}
indicatorColor="primary"
textColor="primary"
fullWidth
>
<Tab label="Overview" component={Link} to="overiew"/>
<Tab label="Users" component={Link} to="users"/>
<Tab label="etc" component={Link} to="etc"/>
</Tabs>
Now this is part of a document tree, so it is under the route:
SITE/organizations/organization-name
So the first should be
SITE/organizations/organization-name/overview
second
SITE/organizations/organization-name/users
etc.
Now when I use above the first will always replace the organization-name in the url. So how would I change this?
A solution would be to always include a trailing slash inside all urls. Then, as I'm currently unsure what the sub-tabs will contain, that's "not my business", clicking tabs in tandem will result in the url becoming like:
SITE/organizations/organization-name/overview/events/overview/
That's not good either. Both these solution have the added problem that they behave differently whether I go to the site by typing
SITE/organizations/organization-name and SITE/organizations/organizations-name/
Which is very bad and could confuse people.
Ideally I would define the "home" of
Site/organizations/organization-name to be Site/organizations/organization-name/overview
And have the two urls (ending with /organization-name and /overview) be aliases of each other.
reactjs react-router material-ui
reactjs react-router material-ui
asked Nov 19 at 22:11
paul23
3,16043170
asked Nov 19 at 22:11
paul23
3,16043170
asked Nov 19 at 22:11
paul23
3,16043170
asked Nov 19 at 22:11
paul23
3,16043170
asked Nov 19 at 22:11
paul23
3,16043170
3,16043170
add a comment |
add a comment |
active
oldest
votes
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%2f53383379%2fhow-to-make-a-relative-route-for-tabs-with-react-router%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
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%2f53383379%2fhow-to-make-a-relative-route-for-tabs-with-react-router%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
