How do you pass data from one view to the other via react-router-dom without using url parameters?2019 Community Moderator ElectionGetting query parameters from react-router hash fragmentreact router pass dataPassing props from react router to children on the serverReact react-router-dom pass props to componentPassing params from links to components - react-router-domHow to use react-router-dom in server-side rendering in react?How to pass redux store props via Route render using react-router?how to get current route in react-router-dom v4.2.2Pass id as props in react-router-domReact-router Pass Data
Was it really inappropriate to write a pull request for the company I interviewed with?
Would an aboleth's Phantasmal Force lair action be affected by Counterspell, Dispel Magic, and/or Slow?
Does "Until when" sound natural for native speakers?
Virginia employer terminated employee and wants signing bonus returned
Gaining more land
Professor forcing me to attend a conference, I can't afford even with 50% funding
I can't die. Who am I?
Do I really need to have a scientific explanation for my premise?
School performs periodic password audits. Is my password compromised?
Is it possible to find 2014 distinct positive integers whose sum is divisible by each of them?
When a wind turbine does not produce enough electricity how does the power company compensate for the loss?
Recommendation letter by significant other if you worked with them professionally?
How do spaceships determine each other's mass in space?
Shifting between bemols and diesis in the key signature
Is it possible to avoid unpacking when merging Association?
(Codewars) Linked Lists - Remove Duplicates
The meaning of ‘otherwise’
Doubts in understanding some concepts of potential energy
What is the generally accepted pronunciation of “topoi”?
Source permutation
Has a sovereign Communist government ever run, and conceded loss, on a fair election?
Making a kiddush for a girl that has hard time finding shidduch
Outlet with 3 sets of wires
Can I negotiate a patent idea for a raise, under French law?
How do you pass data from one view to the other via react-router-dom without using url parameters?
2019 Community Moderator ElectionGetting query parameters from react-router hash fragmentreact router pass dataPassing props from react router to children on the serverReact react-router-dom pass props to componentPassing params from links to components - react-router-domHow to use react-router-dom in server-side rendering in react?How to pass redux store props via Route render using react-router?how to get current route in react-router-dom v4.2.2Pass id as props in react-router-domReact-router Pass Data
I use react-router-dom v 4.3.1 for client-side routing. I'm pretty new to React and can't figure out how to pass data from one view to the other without using url parameters. In Angular, the Angular router has a data property where you can pass data associated with a route. An example would be:
const appRoutes: Routes = [
path: 'hero/:id',
component: HeroDetailComponent,
data: title: 'Hero Detail'
,
];
Can you do the same in react-router-dom? If not, how would you recommend I pass data in React?
Thanks in advance for the help!
reactjs react-router-dom
asked Mar 7 at 4:46
fabfab
7912
add a comment |
I use react-router-dom v 4.3.1 for client-side routing. I'm pretty new to React and can't figure out how to pass data from one view to the other without using url parameters. In Angular, the Angular router has a data property where you can pass data associated with a route. An example would be:
const appRoutes: Routes = [
path: 'hero/:id',
component: HeroDetailComponent,
data: title: 'Hero Detail'
,
];
Can you do the same in react-router-dom? If not, how would you recommend I pass data in React?
Thanks in advance for the help!
reactjs react-router-dom
asked Mar 7 at 4:46
fabfab
7912
add a comment |
I use react-router-dom v 4.3.1 for client-side routing. I'm pretty new to React and can't figure out how to pass data from one view to the other without using url parameters. In Angular, the Angular router has a data property where you can pass data associated with a route. An example would be:
const appRoutes: Routes = [
path: 'hero/:id',
component: HeroDetailComponent,
data: title: 'Hero Detail'
,
];
Can you do the same in react-router-dom? If not, how would you recommend I pass data in React?
Thanks in advance for the help!
reactjs react-router-dom
asked Mar 7 at 4:46
fabfab
7912
I use react-router-dom v 4.3.1 for client-side routing. I'm pretty new to React and can't figure out how to pass data from one view to the other without using url parameters. In Angular, the Angular router has a data property where you can pass data associated with a route. An example would be:
const appRoutes: Routes = [
path: 'hero/:id',
component: HeroDetailComponent,
data: title: 'Hero Detail'
,
];
Can you do the same in react-router-dom? If not, how would you recommend I pass data in React?
Thanks in advance for the help!
reactjs react-router-dom
reactjs react-router-dom
asked Mar 7 at 4:46
fabfab
7912
asked Mar 7 at 4:46
fabfab
7912
asked Mar 7 at 4:46
fabfab
7912
asked Mar 7 at 4:46
fabfab
7912
asked Mar 7 at 4:46
fabfab
7912
7912
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
<Route path="hero/:id" render=() => <HeroDetailComponent title= "Hero Detail" /> />
Read this: Pass props to a component rendered by React Router
Or if you are using <Link> you can use pass through location object
<Link to= pathname: 'hero/:id', state: title: 'Hero Detail' >My route</Link>
answered Mar 7 at 5:21
sultan aslamsultan aslam
538718
2
Don’t use arrow functions inside component prop. That would create a new component every time. Use render instead if you want to pass props to the rendered component.
– jorbuedo
Mar 7 at 6:27
1
This seems to be what I'm looking for. Tested <Link> and that worked. And props to @jorbuedo for pointing that. According to the Route official documentation: "When you use component (instead of render or children) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render...When using an inline function ... use the render or the children prop."
– fab
Mar 7 at 8:07
add a comment |
Well you Could use the context API to create a sort of global AppState that you could update in your first component and use in your second component.
You could also abuse the localStorage API by setting a key with the data in the first component and getting it in the other.
However both of these are workarounds that Shouldn't have to be used. Why do you want to redirect to a page but not pass data to it using URL parameters.
answered Mar 7 at 5:16
ManavMManavM
853217
Thanks for the reply @ManavM. Yeah, I was thinking of using localStorage. The context API I have to read more on. For this particular case, reason I don't want to use URL parameters is because of SEO. The product owner wants to use certain keywords in the url, and the ID I need passed is unfortunately not one of those keywords.
– fab
Mar 7 at 5:23
I see. Depending on the type of data it is, you might want to use context API instead. For example, if your data has anything that will not retain its previous form if serialised ( any class instance, like a momentJS date object, for example ). However, if it is just a bunch of primitives I suppose localStorage will work just as well.
– ManavM
Mar 7 at 5:54
add a comment |
There'a several solutions. React being a library, not a framework, doesn’t force you into a single one.
One way is to use the context api. It’s like a link to an object shared between different components.
Another one is redux, which uses context underneath, and gives you a single store for the whole app. You changes values dispatching actions to the store, so it’s a bit tricky to learn the first time.
Using a stream library would open up a lot of different options, but it’s harder to get into. Check refract if you want to go this way.
A poor man’s stream approach that may serve you is using document as a bus to pass data arround, using addEventListeners to receive data and dispatch new customEvent to send it.
Next is the simplest one of all, share a simple object. Using imports form your components, you can import the same object on both and that will be a single instance where data can be shared. Simple JavaScript. It’s not the react way though, because changes won’t trigger a repaint on the component.
answered Mar 7 at 6:41
jorbuedojorbuedo
786115
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%2f55036270%2fhow-do-you-pass-data-from-one-view-to-the-other-via-react-router-dom-without-usi%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
<Route path="hero/:id" render=() => <HeroDetailComponent title= "Hero Detail" /> />
Read this: Pass props to a component rendered by React Router
Or if you are using <Link> you can use pass through location object
<Link to= pathname: 'hero/:id', state: title: 'Hero Detail' >My route</Link>
answered Mar 7 at 5:21
sultan aslamsultan aslam
538718
2
Don’t use arrow functions inside component prop. That would create a new component every time. Use render instead if you want to pass props to the rendered component.
– jorbuedo
Mar 7 at 6:27
1
This seems to be what I'm looking for. Tested <Link> and that worked. And props to @jorbuedo for pointing that. According to the Route official documentation: "When you use component (instead of render or children) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render...When using an inline function ... use the render or the children prop."
– fab
Mar 7 at 8:07
add a comment |
<Route path="hero/:id" render=() => <HeroDetailComponent title= "Hero Detail" /> />
Read this: Pass props to a component rendered by React Router
Or if you are using <Link> you can use pass through location object
<Link to= pathname: 'hero/:id', state: title: 'Hero Detail' >My route</Link>
answered Mar 7 at 5:21
sultan aslamsultan aslam
538718
2
Don’t use arrow functions inside component prop. That would create a new component every time. Use render instead if you want to pass props to the rendered component.
– jorbuedo
Mar 7 at 6:27
1
This seems to be what I'm looking for. Tested <Link> and that worked. And props to @jorbuedo for pointing that. According to the Route official documentation: "When you use component (instead of render or children) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render...When using an inline function ... use the render or the children prop."
– fab
Mar 7 at 8:07
add a comment |
<Route path="hero/:id" render=() => <HeroDetailComponent title= "Hero Detail" /> />
Read this: Pass props to a component rendered by React Router
Or if you are using <Link> you can use pass through location object
<Link to= pathname: 'hero/:id', state: title: 'Hero Detail' >My route</Link>
answered Mar 7 at 5:21
sultan aslamsultan aslam
538718
<Route path="hero/:id" render=() => <HeroDetailComponent title= "Hero Detail" /> />
Read this: Pass props to a component rendered by React Router
Or if you are using <Link> you can use pass through location object
<Link to= pathname: 'hero/:id', state: title: 'Hero Detail' >My route</Link>
answered Mar 7 at 5:21
sultan aslamsultan aslam
538718
edited Mar 7 at 6:59
answered Mar 7 at 5:21
sultan aslamsultan aslam
538718
answered Mar 7 at 5:21
sultan aslamsultan aslam
538718
answered Mar 7 at 5:21
sultan aslamsultan aslam
538718
538718
2
Don’t use arrow functions inside component prop. That would create a new component every time. Use render instead if you want to pass props to the rendered component.
– jorbuedo
Mar 7 at 6:27
1
This seems to be what I'm looking for. Tested <Link> and that worked. And props to @jorbuedo for pointing that. According to the Route official documentation: "When you use component (instead of render or children) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render...When using an inline function ... use the render or the children prop."
– fab
Mar 7 at 8:07
add a comment |
2
Don’t use arrow functions inside component prop. That would create a new component every time. Use render instead if you want to pass props to the rendered component.
– jorbuedo
Mar 7 at 6:27
1
This seems to be what I'm looking for. Tested <Link> and that worked. And props to @jorbuedo for pointing that. According to the Route official documentation: "When you use component (instead of render or children) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render...When using an inline function ... use the render or the children prop."
– fab
Mar 7 at 8:07
2
2
Don’t use arrow functions inside component prop. That would create a new component every time. Use render instead if you want to pass props to the rendered component.
– jorbuedo
Mar 7 at 6:27
Don’t use arrow functions inside component prop. That would create a new component every time. Use render instead if you want to pass props to the rendered component.
– jorbuedo
Mar 7 at 6:27
1
1
This seems to be what I'm looking for. Tested <Link> and that worked. And props to @jorbuedo for pointing that. According to the Route official documentation: "When you use component (instead of render or children) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render...When using an inline function ... use the render or the children prop."
– fab
Mar 7 at 8:07
This seems to be what I'm looking for. Tested <Link> and that worked. And props to @jorbuedo for pointing that. According to the Route official documentation: "When you use component (instead of render or children) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render...When using an inline function ... use the render or the children prop."
– fab
Mar 7 at 8:07
add a comment |
Well you Could use the context API to create a sort of global AppState that you could update in your first component and use in your second component.
You could also abuse the localStorage API by setting a key with the data in the first component and getting it in the other.
However both of these are workarounds that Shouldn't have to be used. Why do you want to redirect to a page but not pass data to it using URL parameters.
answered Mar 7 at 5:16
ManavMManavM
853217
Thanks for the reply @ManavM. Yeah, I was thinking of using localStorage. The context API I have to read more on. For this particular case, reason I don't want to use URL parameters is because of SEO. The product owner wants to use certain keywords in the url, and the ID I need passed is unfortunately not one of those keywords.
– fab
Mar 7 at 5:23
I see. Depending on the type of data it is, you might want to use context API instead. For example, if your data has anything that will not retain its previous form if serialised ( any class instance, like a momentJS date object, for example ). However, if it is just a bunch of primitives I suppose localStorage will work just as well.
– ManavM
Mar 7 at 5:54
add a comment |
Well you Could use the context API to create a sort of global AppState that you could update in your first component and use in your second component.
You could also abuse the localStorage API by setting a key with the data in the first component and getting it in the other.
However both of these are workarounds that Shouldn't have to be used. Why do you want to redirect to a page but not pass data to it using URL parameters.
answered Mar 7 at 5:16
ManavMManavM
853217
Thanks for the reply @ManavM. Yeah, I was thinking of using localStorage. The context API I have to read more on. For this particular case, reason I don't want to use URL parameters is because of SEO. The product owner wants to use certain keywords in the url, and the ID I need passed is unfortunately not one of those keywords.
– fab
Mar 7 at 5:23
I see. Depending on the type of data it is, you might want to use context API instead. For example, if your data has anything that will not retain its previous form if serialised ( any class instance, like a momentJS date object, for example ). However, if it is just a bunch of primitives I suppose localStorage will work just as well.
– ManavM
Mar 7 at 5:54
add a comment |
Well you Could use the context API to create a sort of global AppState that you could update in your first component and use in your second component.
You could also abuse the localStorage API by setting a key with the data in the first component and getting it in the other.
However both of these are workarounds that Shouldn't have to be used. Why do you want to redirect to a page but not pass data to it using URL parameters.
answered Mar 7 at 5:16
ManavMManavM
853217
Well you Could use the context API to create a sort of global AppState that you could update in your first component and use in your second component.
You could also abuse the localStorage API by setting a key with the data in the first component and getting it in the other.
However both of these are workarounds that Shouldn't have to be used. Why do you want to redirect to a page but not pass data to it using URL parameters.
answered Mar 7 at 5:16
ManavMManavM
853217
answered Mar 7 at 5:16
ManavMManavM
853217
answered Mar 7 at 5:16
ManavMManavM
853217
answered Mar 7 at 5:16
ManavMManavM
853217
853217
Thanks for the reply @ManavM. Yeah, I was thinking of using localStorage. The context API I have to read more on. For this particular case, reason I don't want to use URL parameters is because of SEO. The product owner wants to use certain keywords in the url, and the ID I need passed is unfortunately not one of those keywords.
– fab
Mar 7 at 5:23
I see. Depending on the type of data it is, you might want to use context API instead. For example, if your data has anything that will not retain its previous form if serialised ( any class instance, like a momentJS date object, for example ). However, if it is just a bunch of primitives I suppose localStorage will work just as well.
– ManavM
Mar 7 at 5:54
add a comment |
Thanks for the reply @ManavM. Yeah, I was thinking of using localStorage. The context API I have to read more on. For this particular case, reason I don't want to use URL parameters is because of SEO. The product owner wants to use certain keywords in the url, and the ID I need passed is unfortunately not one of those keywords.
– fab
Mar 7 at 5:23
I see. Depending on the type of data it is, you might want to use context API instead. For example, if your data has anything that will not retain its previous form if serialised ( any class instance, like a momentJS date object, for example ). However, if it is just a bunch of primitives I suppose localStorage will work just as well.
– ManavM
Mar 7 at 5:54
Thanks for the reply @ManavM. Yeah, I was thinking of using localStorage. The context API I have to read more on. For this particular case, reason I don't want to use URL parameters is because of SEO. The product owner wants to use certain keywords in the url, and the ID I need passed is unfortunately not one of those keywords.
– fab
Mar 7 at 5:23
Thanks for the reply @ManavM. Yeah, I was thinking of using localStorage. The context API I have to read more on. For this particular case, reason I don't want to use URL parameters is because of SEO. The product owner wants to use certain keywords in the url, and the ID I need passed is unfortunately not one of those keywords.
– fab
Mar 7 at 5:23
I see. Depending on the type of data it is, you might want to use context API instead. For example, if your data has anything that will not retain its previous form if serialised ( any class instance, like a momentJS date object, for example ). However, if it is just a bunch of primitives I suppose localStorage will work just as well.
– ManavM
Mar 7 at 5:54
I see. Depending on the type of data it is, you might want to use context API instead. For example, if your data has anything that will not retain its previous form if serialised ( any class instance, like a momentJS date object, for example ). However, if it is just a bunch of primitives I suppose localStorage will work just as well.
– ManavM
Mar 7 at 5:54
add a comment |
There'a several solutions. React being a library, not a framework, doesn’t force you into a single one.
One way is to use the context api. It’s like a link to an object shared between different components.
Another one is redux, which uses context underneath, and gives you a single store for the whole app. You changes values dispatching actions to the store, so it’s a bit tricky to learn the first time.
Using a stream library would open up a lot of different options, but it’s harder to get into. Check refract if you want to go this way.
A poor man’s stream approach that may serve you is using document as a bus to pass data arround, using addEventListeners to receive data and dispatch new customEvent to send it.
Next is the simplest one of all, share a simple object. Using imports form your components, you can import the same object on both and that will be a single instance where data can be shared. Simple JavaScript. It’s not the react way though, because changes won’t trigger a repaint on the component.
answered Mar 7 at 6:41
jorbuedojorbuedo
786115
add a comment |
There'a several solutions. React being a library, not a framework, doesn’t force you into a single one.
One way is to use the context api. It’s like a link to an object shared between different components.
Another one is redux, which uses context underneath, and gives you a single store for the whole app. You changes values dispatching actions to the store, so it’s a bit tricky to learn the first time.
Using a stream library would open up a lot of different options, but it’s harder to get into. Check refract if you want to go this way.
A poor man’s stream approach that may serve you is using document as a bus to pass data arround, using addEventListeners to receive data and dispatch new customEvent to send it.
Next is the simplest one of all, share a simple object. Using imports form your components, you can import the same object on both and that will be a single instance where data can be shared. Simple JavaScript. It’s not the react way though, because changes won’t trigger a repaint on the component.
answered Mar 7 at 6:41
jorbuedojorbuedo
786115
add a comment |
There'a several solutions. React being a library, not a framework, doesn’t force you into a single one.
One way is to use the context api. It’s like a link to an object shared between different components.
Another one is redux, which uses context underneath, and gives you a single store for the whole app. You changes values dispatching actions to the store, so it’s a bit tricky to learn the first time.
Using a stream library would open up a lot of different options, but it’s harder to get into. Check refract if you want to go this way.
A poor man’s stream approach that may serve you is using document as a bus to pass data arround, using addEventListeners to receive data and dispatch new customEvent to send it.
Next is the simplest one of all, share a simple object. Using imports form your components, you can import the same object on both and that will be a single instance where data can be shared. Simple JavaScript. It’s not the react way though, because changes won’t trigger a repaint on the component.
answered Mar 7 at 6:41
jorbuedojorbuedo
786115
There'a several solutions. React being a library, not a framework, doesn’t force you into a single one.
One way is to use the context api. It’s like a link to an object shared between different components.
Another one is redux, which uses context underneath, and gives you a single store for the whole app. You changes values dispatching actions to the store, so it’s a bit tricky to learn the first time.
Using a stream library would open up a lot of different options, but it’s harder to get into. Check refract if you want to go this way.
A poor man’s stream approach that may serve you is using document as a bus to pass data arround, using addEventListeners to receive data and dispatch new customEvent to send it.
Next is the simplest one of all, share a simple object. Using imports form your components, you can import the same object on both and that will be a single instance where data can be shared. Simple JavaScript. It’s not the react way though, because changes won’t trigger a repaint on the component.
answered Mar 7 at 6:41
jorbuedojorbuedo
786115
answered Mar 7 at 6:41
jorbuedojorbuedo
786115
answered Mar 7 at 6:41
jorbuedojorbuedo
786115
answered Mar 7 at 6:41
jorbuedojorbuedo
786115
786115
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%2f55036270%2fhow-do-you-pass-data-from-one-view-to-the-other-via-react-router-dom-without-usi%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
