Nested routes and Switch - how to pass props.match.params.id?
I have been trying to understand nested routes and switch in the React v4 Router.
Consider the main router looks like this (simplified):
<Switch>
<Route path="/" component={LoginPage} exact={true} />
<Route path="/dashboard/edit/:id" component={DashboardPage} />
<Route path="/dashboard" component={DashboardPage} />
</Switch>
The "dashboard" component renders the sub-route:
render(){
return (
<div className="note">
<Route to='/edit/:id' render={(props) =>
<div>
<NoteList {...props} />
<EditNotePage {...props} />
</div>
} />
</div>
)
}
The "EditNotePage" component can access the param by:
const mapStateToProps = (state, props) => ({
note: state.notes.find((note) => note.id === props.match.params.id
});
Is this the correct approach?
It seems a little redundant to specify "/dashboard/edit/:id" twice ( ? )
Once in main router and the again in the dashboard component.
However, if I do not match the route in the main router "Switch" the "props.match.params.id" is not accessible since "props.match" will only point to "/dashboard" .
Have I missed something crucial regarding how the React v4 Router works? :)
Kind regards
Kermit
javascript reactjs react-router-v4
edited Nov 20 at 18:15
chazsolo
5,1071233
asked Nov 20 at 17:58
Kermit
92114
add a comment |
I have been trying to understand nested routes and switch in the React v4 Router.
Consider the main router looks like this (simplified):
<Switch>
<Route path="/" component={LoginPage} exact={true} />
<Route path="/dashboard/edit/:id" component={DashboardPage} />
<Route path="/dashboard" component={DashboardPage} />
</Switch>
The "dashboard" component renders the sub-route:
render(){
return (
<div className="note">
<Route to='/edit/:id' render={(props) =>
<div>
<NoteList {...props} />
<EditNotePage {...props} />
</div>
} />
</div>
)
}
The "EditNotePage" component can access the param by:
const mapStateToProps = (state, props) => ({
note: state.notes.find((note) => note.id === props.match.params.id
});
Is this the correct approach?
It seems a little redundant to specify "/dashboard/edit/:id" twice ( ? )
Once in main router and the again in the dashboard component.
However, if I do not match the route in the main router "Switch" the "props.match.params.id" is not accessible since "props.match" will only point to "/dashboard" .
Have I missed something crucial regarding how the React v4 Router works? :)
Kind regards
Kermit
javascript reactjs react-router-v4
edited Nov 20 at 18:15
chazsolo
5,1071233
asked Nov 20 at 17:58
Kermit
92114
add a comment |
I have been trying to understand nested routes and switch in the React v4 Router.
Consider the main router looks like this (simplified):
<Switch>
<Route path="/" component={LoginPage} exact={true} />
<Route path="/dashboard/edit/:id" component={DashboardPage} />
<Route path="/dashboard" component={DashboardPage} />
</Switch>
The "dashboard" component renders the sub-route:
render(){
return (
<div className="note">
<Route to='/edit/:id' render={(props) =>
<div>
<NoteList {...props} />
<EditNotePage {...props} />
</div>
} />
</div>
)
}
The "EditNotePage" component can access the param by:
const mapStateToProps = (state, props) => ({
note: state.notes.find((note) => note.id === props.match.params.id
});
Is this the correct approach?
It seems a little redundant to specify "/dashboard/edit/:id" twice ( ? )
Once in main router and the again in the dashboard component.
However, if I do not match the route in the main router "Switch" the "props.match.params.id" is not accessible since "props.match" will only point to "/dashboard" .
Have I missed something crucial regarding how the React v4 Router works? :)
Kind regards
Kermit
javascript reactjs react-router-v4
edited Nov 20 at 18:15
chazsolo
5,1071233
asked Nov 20 at 17:58
Kermit
92114
I have been trying to understand nested routes and switch in the React v4 Router.
Consider the main router looks like this (simplified):
<Switch>
<Route path="/" component={LoginPage} exact={true} />
<Route path="/dashboard/edit/:id" component={DashboardPage} />
<Route path="/dashboard" component={DashboardPage} />
</Switch>
The "dashboard" component renders the sub-route:
render(){
return (
<div className="note">
<Route to='/edit/:id' render={(props) =>
<div>
<NoteList {...props} />
<EditNotePage {...props} />
</div>
} />
</div>
)
}
The "EditNotePage" component can access the param by:
const mapStateToProps = (state, props) => ({
note: state.notes.find((note) => note.id === props.match.params.id
});
Is this the correct approach?
It seems a little redundant to specify "/dashboard/edit/:id" twice ( ? )
Once in main router and the again in the dashboard component.
However, if I do not match the route in the main router "Switch" the "props.match.params.id" is not accessible since "props.match" will only point to "/dashboard" .
Have I missed something crucial regarding how the React v4 Router works? :)
Kind regards
Kermit
javascript reactjs react-router-v4
javascript reactjs react-router-v4
edited Nov 20 at 18:15
chazsolo
5,1071233
asked Nov 20 at 17:58
Kermit
92114
edited Nov 20 at 18:15
chazsolo
5,1071233
asked Nov 20 at 17:58
Kermit
92114
edited Nov 20 at 18:15
chazsolo
5,1071233
edited Nov 20 at 18:15
chazsolo
5,1071233
edited Nov 20 at 18:15
chazsolo
5,1071233
5,1071233
asked Nov 20 at 17:58
Kermit
92114
asked Nov 20 at 17:58
Kermit
92114
asked Nov 20 at 17:58
Kermit
92114
92114
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Nope, didn't miss anything. That's how react router v4 works. You define full routes. The trick you can use is that you can grab the current path and prepend it to your "nested path".
answered Nov 20 at 18:01
ZekeDroid
5,54431852
Ok, fantastic! Can you give me a simple example of how to grab the current path and prepend it? path={${match.url}/edit/:id} ?
– Kermit
Nov 20 at 18:24
I would uselocation:this.props.location.pathname. Use that instead ofmatch.urland it should work like you expect!
– ZekeDroid
Nov 20 at 19:07
Alternatively, for larger projects and for maintainability purposes, I would use a constants file and export these "base paths". Then import them everywhere you need them. This will help you track down bugs with routing further down, if you'd like.
– ZekeDroid
Nov 20 at 19:08
Tanks a lot! That's very good advice! (^__^)
– Kermit
Nov 20 at 19:42
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%2f53398859%2fnested-routes-and-switch-how-to-pass-props-match-params-id%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
Nope, didn't miss anything. That's how react router v4 works. You define full routes. The trick you can use is that you can grab the current path and prepend it to your "nested path".
answered Nov 20 at 18:01
ZekeDroid
5,54431852
Ok, fantastic! Can you give me a simple example of how to grab the current path and prepend it? path={${match.url}/edit/:id} ?
– Kermit
Nov 20 at 18:24
I would uselocation:this.props.location.pathname. Use that instead ofmatch.urland it should work like you expect!
– ZekeDroid
Nov 20 at 19:07
Alternatively, for larger projects and for maintainability purposes, I would use a constants file and export these "base paths". Then import them everywhere you need them. This will help you track down bugs with routing further down, if you'd like.
– ZekeDroid
Nov 20 at 19:08
Tanks a lot! That's very good advice! (^__^)
– Kermit
Nov 20 at 19:42
add a comment |
Nope, didn't miss anything. That's how react router v4 works. You define full routes. The trick you can use is that you can grab the current path and prepend it to your "nested path".
answered Nov 20 at 18:01
ZekeDroid
5,54431852
Ok, fantastic! Can you give me a simple example of how to grab the current path and prepend it? path={${match.url}/edit/:id} ?
– Kermit
Nov 20 at 18:24
I would uselocation:this.props.location.pathname. Use that instead ofmatch.urland it should work like you expect!
– ZekeDroid
Nov 20 at 19:07
Alternatively, for larger projects and for maintainability purposes, I would use a constants file and export these "base paths". Then import them everywhere you need them. This will help you track down bugs with routing further down, if you'd like.
– ZekeDroid
Nov 20 at 19:08
Tanks a lot! That's very good advice! (^__^)
– Kermit
Nov 20 at 19:42
add a comment |
Nope, didn't miss anything. That's how react router v4 works. You define full routes. The trick you can use is that you can grab the current path and prepend it to your "nested path".
answered Nov 20 at 18:01
ZekeDroid
5,54431852
Nope, didn't miss anything. That's how react router v4 works. You define full routes. The trick you can use is that you can grab the current path and prepend it to your "nested path".
answered Nov 20 at 18:01
ZekeDroid
5,54431852
answered Nov 20 at 18:01
ZekeDroid
5,54431852
answered Nov 20 at 18:01
ZekeDroid
5,54431852
answered Nov 20 at 18:01
ZekeDroid
5,54431852
5,54431852
Ok, fantastic! Can you give me a simple example of how to grab the current path and prepend it? path={${match.url}/edit/:id} ?
– Kermit
Nov 20 at 18:24
I would uselocation:this.props.location.pathname. Use that instead ofmatch.urland it should work like you expect!
– ZekeDroid
Nov 20 at 19:07
Alternatively, for larger projects and for maintainability purposes, I would use a constants file and export these "base paths". Then import them everywhere you need them. This will help you track down bugs with routing further down, if you'd like.
– ZekeDroid
Nov 20 at 19:08
Tanks a lot! That's very good advice! (^__^)
– Kermit
Nov 20 at 19:42
add a comment |
Ok, fantastic! Can you give me a simple example of how to grab the current path and prepend it? path={${match.url}/edit/:id} ?
– Kermit
Nov 20 at 18:24
I would uselocation:this.props.location.pathname. Use that instead ofmatch.urland it should work like you expect!
– ZekeDroid
Nov 20 at 19:07
Alternatively, for larger projects and for maintainability purposes, I would use a constants file and export these "base paths". Then import them everywhere you need them. This will help you track down bugs with routing further down, if you'd like.
– ZekeDroid
Nov 20 at 19:08
Tanks a lot! That's very good advice! (^__^)
– Kermit
Nov 20 at 19:42
Ok, fantastic! Can you give me a simple example of how to grab the current path and prepend it? path={
${match.url}/edit/:id} ?– Kermit
Nov 20 at 18:24
Ok, fantastic! Can you give me a simple example of how to grab the current path and prepend it? path={
${match.url}/edit/:id} ?– Kermit
Nov 20 at 18:24
I would use
location: this.props.location.pathname. Use that instead of match.url and it should work like you expect!– ZekeDroid
Nov 20 at 19:07
I would use
location: this.props.location.pathname. Use that instead of match.url and it should work like you expect!– ZekeDroid
Nov 20 at 19:07
Alternatively, for larger projects and for maintainability purposes, I would use a constants file and export these "base paths". Then import them everywhere you need them. This will help you track down bugs with routing further down, if you'd like.
– ZekeDroid
Nov 20 at 19:08
Alternatively, for larger projects and for maintainability purposes, I would use a constants file and export these "base paths". Then import them everywhere you need them. This will help you track down bugs with routing further down, if you'd like.
– ZekeDroid
Nov 20 at 19:08
Tanks a lot! That's very good advice! (^__^)
– Kermit
Nov 20 at 19:42
Tanks a lot! That's very good advice! (^__^)
– Kermit
Nov 20 at 19:42
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.
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%2f53398859%2fnested-routes-and-switch-how-to-pass-props-match-params-id%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
