React router 4, reference param inside route defintion
I have a nested route definition with react router 4
const App = () => (
<Switch>
<Route
key={3}
path='/case-studies'
render={({ match: { url } }) => (
<div>
<Route
exact
path={`${url}/`}
render={(location) => <Page
location={location}
data={
{
type: 'archive',
api: apiBase + '/' + 'pages' + '?slug=case_study'
}
} />
} />
<Route
exact
path={`${url}/:slug`}
render={(location, match) => <Page
location={location}
data={
{
type: 'archive',
api: apiBase + '/' + 'case_study' + '?slug=' + match.params.slug
}
} />
} />
</div>
)}
/>,
I'm interested in this line:
api: apiBase + '/' + 'case_study' + '?slug=' + match.params.slug
I know how to reference match within my rendered component 'Page' props.
However I'm trying to define this property ('api') within the route and pass it through, already defined, to the component, but with the dynamic paramter slug.
However I can't seem to access match here, or its dynamic property 'slug' (inside the route definition).
Is this possible?
If so, since I haven't found any reference to it elsewhere, is it an anti-pattern? (if so, why?)
reactjs parameters routes react-router
asked Nov 14 '18 at 9:26
bakubaku
16819
add a comment |
I have a nested route definition with react router 4
const App = () => (
<Switch>
<Route
key={3}
path='/case-studies'
render={({ match: { url } }) => (
<div>
<Route
exact
path={`${url}/`}
render={(location) => <Page
location={location}
data={
{
type: 'archive',
api: apiBase + '/' + 'pages' + '?slug=case_study'
}
} />
} />
<Route
exact
path={`${url}/:slug`}
render={(location, match) => <Page
location={location}
data={
{
type: 'archive',
api: apiBase + '/' + 'case_study' + '?slug=' + match.params.slug
}
} />
} />
</div>
)}
/>,
I'm interested in this line:
api: apiBase + '/' + 'case_study' + '?slug=' + match.params.slug
I know how to reference match within my rendered component 'Page' props.
However I'm trying to define this property ('api') within the route and pass it through, already defined, to the component, but with the dynamic paramter slug.
However I can't seem to access match here, or its dynamic property 'slug' (inside the route definition).
Is this possible?
If so, since I haven't found any reference to it elsewhere, is it an anti-pattern? (if so, why?)
reactjs parameters routes react-router
asked Nov 14 '18 at 9:26
bakubaku
16819
add a comment |
I have a nested route definition with react router 4
const App = () => (
<Switch>
<Route
key={3}
path='/case-studies'
render={({ match: { url } }) => (
<div>
<Route
exact
path={`${url}/`}
render={(location) => <Page
location={location}
data={
{
type: 'archive',
api: apiBase + '/' + 'pages' + '?slug=case_study'
}
} />
} />
<Route
exact
path={`${url}/:slug`}
render={(location, match) => <Page
location={location}
data={
{
type: 'archive',
api: apiBase + '/' + 'case_study' + '?slug=' + match.params.slug
}
} />
} />
</div>
)}
/>,
I'm interested in this line:
api: apiBase + '/' + 'case_study' + '?slug=' + match.params.slug
I know how to reference match within my rendered component 'Page' props.
However I'm trying to define this property ('api') within the route and pass it through, already defined, to the component, but with the dynamic paramter slug.
However I can't seem to access match here, or its dynamic property 'slug' (inside the route definition).
Is this possible?
If so, since I haven't found any reference to it elsewhere, is it an anti-pattern? (if so, why?)
reactjs parameters routes react-router
asked Nov 14 '18 at 9:26
bakubaku
16819
I have a nested route definition with react router 4
const App = () => (
<Switch>
<Route
key={3}
path='/case-studies'
render={({ match: { url } }) => (
<div>
<Route
exact
path={`${url}/`}
render={(location) => <Page
location={location}
data={
{
type: 'archive',
api: apiBase + '/' + 'pages' + '?slug=case_study'
}
} />
} />
<Route
exact
path={`${url}/:slug`}
render={(location, match) => <Page
location={location}
data={
{
type: 'archive',
api: apiBase + '/' + 'case_study' + '?slug=' + match.params.slug
}
} />
} />
</div>
)}
/>,
I'm interested in this line:
api: apiBase + '/' + 'case_study' + '?slug=' + match.params.slug
I know how to reference match within my rendered component 'Page' props.
However I'm trying to define this property ('api') within the route and pass it through, already defined, to the component, but with the dynamic paramter slug.
However I can't seem to access match here, or its dynamic property 'slug' (inside the route definition).
Is this possible?
If so, since I haven't found any reference to it elsewhere, is it an anti-pattern? (if so, why?)
reactjs parameters routes react-router
reactjs parameters routes react-router
asked Nov 14 '18 at 9:26
bakubaku
16819
asked Nov 14 '18 at 9:26
bakubaku
16819
edited Nov 14 '18 at 9:33
baku
asked Nov 14 '18 at 9:26
bakubaku
16819
asked Nov 14 '18 at 9:26
bakubaku
16819
asked Nov 14 '18 at 9:26
bakubaku
16819
16819
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
this seems to work:
<Route
exact path={`${url}/:slug`}
render={({ match: { params: { slug } } }) => (
<Page
data={
{
type: 'archive',
api: apiBase + '/' + 'case_study' + '?slug=' + slug
}
}
/>)
}
/>
edited Nov 14 '18 at 12:59
c-chavez
2,21321733
answered Nov 14 '18 at 9:40
bakubaku
16819
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%2f53296817%2freact-router-4-reference-param-inside-route-defintion%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
this seems to work:
<Route
exact path={`${url}/:slug`}
render={({ match: { params: { slug } } }) => (
<Page
data={
{
type: 'archive',
api: apiBase + '/' + 'case_study' + '?slug=' + slug
}
}
/>)
}
/>
edited Nov 14 '18 at 12:59
c-chavez
2,21321733
answered Nov 14 '18 at 9:40
bakubaku
16819
add a comment |
this seems to work:
<Route
exact path={`${url}/:slug`}
render={({ match: { params: { slug } } }) => (
<Page
data={
{
type: 'archive',
api: apiBase + '/' + 'case_study' + '?slug=' + slug
}
}
/>)
}
/>
edited Nov 14 '18 at 12:59
c-chavez
2,21321733
answered Nov 14 '18 at 9:40
bakubaku
16819
add a comment |
this seems to work:
<Route
exact path={`${url}/:slug`}
render={({ match: { params: { slug } } }) => (
<Page
data={
{
type: 'archive',
api: apiBase + '/' + 'case_study' + '?slug=' + slug
}
}
/>)
}
/>
edited Nov 14 '18 at 12:59
c-chavez
2,21321733
answered Nov 14 '18 at 9:40
bakubaku
16819
this seems to work:
<Route
exact path={`${url}/:slug`}
render={({ match: { params: { slug } } }) => (
<Page
data={
{
type: 'archive',
api: apiBase + '/' + 'case_study' + '?slug=' + slug
}
}
/>)
}
/>
edited Nov 14 '18 at 12:59
c-chavez
2,21321733
answered Nov 14 '18 at 9:40
bakubaku
16819
edited Nov 14 '18 at 12:59
c-chavez
2,21321733
edited Nov 14 '18 at 12:59
c-chavez
2,21321733
edited Nov 14 '18 at 12:59
c-chavez
2,21321733
2,21321733
answered Nov 14 '18 at 9:40
bakubaku
16819
answered Nov 14 '18 at 9:40
bakubaku
16819
answered Nov 14 '18 at 9:40
bakubaku
16819
16819
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%2f53296817%2freact-router-4-reference-param-inside-route-defintion%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
