Mixing
React-Router Link variables not converted to values
I'm using the react-router Link component passing a variable using /customers/${id}.
The link navigates to the right component, but instead of translating ${id} to its value, it passes it as text like this: '/customers/$%7Bid%7D'.
I'm using react-router 4.3.1
I'm learning React and am creating a simple master / detail webapp.
I have successfully retrieved data from my API and rendered this as a list. I want to be able to click on the items in the list and navigate to a details component passing the unique ID as a parameter.
I've tried all sorts of things, but basically, I can't get ${} to work no matter what I try. I have tried to google this problem but haven't found anyone with a similar problem.
I've read a number of articles on how to set up routing using react-router v4 and are following these but encounter this issue.
If I try to pass in the link manually the route works fine and it navigates correctly to the details-component which renders the specific customer.
<Link to={'/customers/${this.props.item.Id}'}>{this.props.item.Name}</Link>
The Route looks like this:
<Route path='/customers/:Id' component={CustomerDetails} />
I expect the Link to generate the following URL: /customers/3 but the actual result is /customers/%7Bthis.props.item.Id%7D
The variable name is correctly spelt.
reactjs react-router-v4
edited Jan 1 at 11:31
GeekSambhu
701719
asked Jan 1 at 9:31
SlettixSlettix
32
add a comment |
I'm using the react-router Link component passing a variable using /customers/${id}.
The link navigates to the right component, but instead of translating ${id} to its value, it passes it as text like this: '/customers/$%7Bid%7D'.
I'm using react-router 4.3.1
I'm learning React and am creating a simple master / detail webapp.
I have successfully retrieved data from my API and rendered this as a list. I want to be able to click on the items in the list and navigate to a details component passing the unique ID as a parameter.
I've tried all sorts of things, but basically, I can't get ${} to work no matter what I try. I have tried to google this problem but haven't found anyone with a similar problem.
I've read a number of articles on how to set up routing using react-router v4 and are following these but encounter this issue.
If I try to pass in the link manually the route works fine and it navigates correctly to the details-component which renders the specific customer.
<Link to={'/customers/${this.props.item.Id}'}>{this.props.item.Name}</Link>
The Route looks like this:
<Route path='/customers/:Id' component={CustomerDetails} />
I expect the Link to generate the following URL: /customers/3 but the actual result is /customers/%7Bthis.props.item.Id%7D
The variable name is correctly spelt.
reactjs react-router-v4
edited Jan 1 at 11:31
GeekSambhu
701719
asked Jan 1 at 9:31
SlettixSlettix
32
add a comment |
I'm using the react-router Link component passing a variable using /customers/${id}.
The link navigates to the right component, but instead of translating ${id} to its value, it passes it as text like this: '/customers/$%7Bid%7D'.
I'm using react-router 4.3.1
I'm learning React and am creating a simple master / detail webapp.
I have successfully retrieved data from my API and rendered this as a list. I want to be able to click on the items in the list and navigate to a details component passing the unique ID as a parameter.
I've tried all sorts of things, but basically, I can't get ${} to work no matter what I try. I have tried to google this problem but haven't found anyone with a similar problem.
I've read a number of articles on how to set up routing using react-router v4 and are following these but encounter this issue.
If I try to pass in the link manually the route works fine and it navigates correctly to the details-component which renders the specific customer.
<Link to={'/customers/${this.props.item.Id}'}>{this.props.item.Name}</Link>
The Route looks like this:
<Route path='/customers/:Id' component={CustomerDetails} />
I expect the Link to generate the following URL: /customers/3 but the actual result is /customers/%7Bthis.props.item.Id%7D
The variable name is correctly spelt.
reactjs react-router-v4
edited Jan 1 at 11:31
GeekSambhu
701719
asked Jan 1 at 9:31
SlettixSlettix
32
I'm using the react-router Link component passing a variable using /customers/${id}.
The link navigates to the right component, but instead of translating ${id} to its value, it passes it as text like this: '/customers/$%7Bid%7D'.
I'm using react-router 4.3.1
I'm learning React and am creating a simple master / detail webapp.
I have successfully retrieved data from my API and rendered this as a list. I want to be able to click on the items in the list and navigate to a details component passing the unique ID as a parameter.
I've tried all sorts of things, but basically, I can't get ${} to work no matter what I try. I have tried to google this problem but haven't found anyone with a similar problem.
I've read a number of articles on how to set up routing using react-router v4 and are following these but encounter this issue.
If I try to pass in the link manually the route works fine and it navigates correctly to the details-component which renders the specific customer.
<Link to={'/customers/${this.props.item.Id}'}>{this.props.item.Name}</Link>
The Route looks like this:
<Route path='/customers/:Id' component={CustomerDetails} />
I expect the Link to generate the following URL: /customers/3 but the actual result is /customers/%7Bthis.props.item.Id%7D
The variable name is correctly spelt.
reactjs react-router-v4
reactjs react-router-v4
edited Jan 1 at 11:31
GeekSambhu
701719
asked Jan 1 at 9:31
SlettixSlettix
32
edited Jan 1 at 11:31
GeekSambhu
701719
asked Jan 1 at 9:31
SlettixSlettix
32
edited Jan 1 at 11:31
GeekSambhu
701719
edited Jan 1 at 11:31
GeekSambhu
701719
edited Jan 1 at 11:31
GeekSambhu
701719
701719
asked Jan 1 at 9:31
SlettixSlettix
32
asked Jan 1 at 9:31
SlettixSlettix
32
asked Jan 1 at 9:31
SlettixSlettix
32
32
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You should be using back ticks for string templating.
Instead of:
'/customers/${this.props.item.Id}'
use this:
`/customers/${this.props.item.Id}`
Read more about template literals here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
answered Jan 1 at 9:36
CanastroCanastro
1,9012334
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%2f53994363%2freact-router-link-variables-not-converted-to-values%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
You should be using back ticks for string templating.
Instead of:
'/customers/${this.props.item.Id}'
use this:
`/customers/${this.props.item.Id}`
Read more about template literals here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
answered Jan 1 at 9:36
CanastroCanastro
1,9012334
add a comment |
You should be using back ticks for string templating.
Instead of:
'/customers/${this.props.item.Id}'
use this:
`/customers/${this.props.item.Id}`
Read more about template literals here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
answered Jan 1 at 9:36
CanastroCanastro
1,9012334
add a comment |
You should be using back ticks for string templating.
Instead of:
'/customers/${this.props.item.Id}'
use this:
`/customers/${this.props.item.Id}`
Read more about template literals here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
answered Jan 1 at 9:36
CanastroCanastro
1,9012334
You should be using back ticks for string templating.
Instead of:
'/customers/${this.props.item.Id}'
use this:
`/customers/${this.props.item.Id}`
Read more about template literals here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
answered Jan 1 at 9:36
CanastroCanastro
1,9012334
answered Jan 1 at 9:36
CanastroCanastro
1,9012334
answered Jan 1 at 9:36
CanastroCanastro
1,9012334
answered Jan 1 at 9:36
CanastroCanastro
1,9012334
1,9012334
add a comment |
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%2f53994363%2freact-router-link-variables-not-converted-to-values%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
