ReactJS ReactDOM Render for Separate PagesReact render context / context.routerHow to use react.js with a multi page website (Non SPA)?find size of react component or image before renderingLeaflet ReactJS Map does not show tile completelyReact router: How to render two different components on different pages?Module not found: Can't resolve 'ReactDOM'How to use react-router-dom in server-side rendering in react?my slider is not working and showing no error and all images are appearing the pageReact Router Component rendering on same pageHow to render components in react-router-dom with bundle.js file?

How is it possible for user's password to be changed after storage was encrypted? (on OS X, Android)

LWC and complex parameters

Add an angle to a sphere

Are cabin dividers used to "hide" the flex of the airplane?

Copycat chess is back

Re-submission of rejected manuscript without informing co-authors

Is domain driven design an anti-SQL pattern?

What is it called when one voice type sings a 'solo'?

extract characters between two commas?

Is there a name of the flying bionic bird?

How do I create uniquely male characters?

Where to refill my bottle in India?

What are the advantages and disadvantages of running one shots compared to campaigns?

Could a US political party gain complete control over the government by removing checks & balances?

Ideas for 3rd eye abilities

How did the USSR manage to innovate in an environment characterized by government censorship and high bureaucracy?

Typesetting a double Over Dot on top of a symbol

How would photo IDs work for shapeshifters?

Doomsday-clock for my fantasy planet

Is it legal to have the "// (c) 2019 John Smith" header in all files when there are hundreds of contributors?

Need help identifying/translating a plaque in Tangier, Morocco

Does it makes sense to buy a new cycle to learn riding?

Landlord wants to switch my lease to a "Land contract" to "get back at the city"

What does "enim et" mean?

ReactJS ReactDOM Render for Separate Pages

React render context / context.routerHow to use react.js with a multi page website (Non SPA)?find size of react component or image before renderingLeaflet ReactJS Map does not show tile completelyReact router: How to render two different components on different pages?Module not found: Can't resolve 'ReactDOM'How to use react-router-dom in server-side rendering in react?my slider is not working and showing no error and all images are appearing the pageReact Router Component rendering on same pageHow to render components in react-router-dom with bundle.js file?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

I am in the process of migrating my pages from html and jquery to using React and I am aware that React Router and Redux are methods to handle routing when building a react application, but for the time being, I was wondering how I can change my setup to be able to render different react components for different pages. At the moment, I am able to render one react component when my index page is loaded, but I thought I could add another ReactDOM.render() beneath it and target a different div id for the component on a different page, but I noticed an error, Invariant Violation: Target container is not a DOM element. Is this related to not using a react router or something else?

here is my index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import ActivityFeed from './components/App/ActivityFeed/ActivityFeed';
import CreateAnnotation from './components/App/Annotation/CreateAnnotation';


ReactDOM.render(<ActivityFeed />, document.getElementById('annotation-card'));
ReactDOM.render(<CreateAnnotation />, document.getElementById('annotation-form'));

Here is <CreateAnnotation/>:
import React from 'react';

//GET /api/activity-feed and set to state

 export default class CreateAnnotation extends React.Component 
 constructor(props, context) 
 notifications: [],
 reportLinks: [],
 files: []
 
 

 render() 
 return (
 <div>
 <p>test</p>
 </div>
 )

Here is the view file:

<!DOCTYPE html>
<head>
 > app/app-head
</head>
<body>
 <div id="annotation-form"></div>
 > general/bundle-js
</body>
</html>

> general/bundle-js:

<script src="/bundle.js"></script>

asked Mar 22 at 1:44

cphill

1,69963881

add a comment |

here is my index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import ActivityFeed from './components/App/ActivityFeed/ActivityFeed';
import CreateAnnotation from './components/App/Annotation/CreateAnnotation';


ReactDOM.render(<ActivityFeed />, document.getElementById('annotation-card'));
ReactDOM.render(<CreateAnnotation />, document.getElementById('annotation-form'));

Here is <CreateAnnotation/>:
import React from 'react';

//GET /api/activity-feed and set to state

 export default class CreateAnnotation extends React.Component 
 constructor(props, context) 
 notifications: [],
 reportLinks: [],
 files: []
 
 

 render() 
 return (
 <div>
 <p>test</p>
 </div>
 )

Here is the view file:

<!DOCTYPE html>
<head>
 > app/app-head
</head>
<body>
 <div id="annotation-form"></div>
 > general/bundle-js
</body>
</html>

> general/bundle-js:

<script src="/bundle.js"></script>

asked Mar 22 at 1:44

cphill

1,69963881

add a comment |

here is my index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import ActivityFeed from './components/App/ActivityFeed/ActivityFeed';
import CreateAnnotation from './components/App/Annotation/CreateAnnotation';


ReactDOM.render(<ActivityFeed />, document.getElementById('annotation-card'));
ReactDOM.render(<CreateAnnotation />, document.getElementById('annotation-form'));

Here is <CreateAnnotation/>:
import React from 'react';

//GET /api/activity-feed and set to state

 export default class CreateAnnotation extends React.Component 
 constructor(props, context) 
 notifications: [],
 reportLinks: [],
 files: []
 
 

 render() 
 return (
 <div>
 <p>test</p>
 </div>
 )

Here is the view file:

<!DOCTYPE html>
<head>
 > app/app-head
</head>
<body>
 <div id="annotation-form"></div>
 > general/bundle-js
</body>
</html>

> general/bundle-js:

<script src="/bundle.js"></script>

asked Mar 22 at 1:44

cphill

1,69963881

here is my index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import ActivityFeed from './components/App/ActivityFeed/ActivityFeed';
import CreateAnnotation from './components/App/Annotation/CreateAnnotation';


ReactDOM.render(<ActivityFeed />, document.getElementById('annotation-card'));
ReactDOM.render(<CreateAnnotation />, document.getElementById('annotation-form'));

Here is <CreateAnnotation/>:
import React from 'react';

//GET /api/activity-feed and set to state

 export default class CreateAnnotation extends React.Component 
 constructor(props, context) 
 notifications: [],
 reportLinks: [],
 files: []
 
 

 render() 
 return (
 <div>
 <p>test</p>
 </div>
 )

Here is the view file:

<!DOCTYPE html>
<head>
 > app/app-head
</head>
<body>
 <div id="annotation-form"></div>
 > general/bundle-js
</body>
</html>

> general/bundle-js:

<script src="/bundle.js"></script>

reactjs

asked Mar 22 at 1:44

cphill

1,69963881

asked Mar 22 at 1:44

cphill

1,69963881

asked Mar 22 at 1:44

cphill

1,69963881

asked Mar 22 at 1:44

cphill

1,69963881

asked Mar 22 at 1:44

cphill

1,69963881

add a comment |

1 Answer
1

active

oldest

votes

ReactDOM renders a React element into the DOM in the supplied container 
and return a reference to the component (or returns null for stateless 
components). If the React element was previously rendered into 
container , this will perform an update on it and only mutate the DOM 
as necessary to reflect the latest React element.

Technically speaking you cant render more than one React element into the DOM with multiple ReactDOM render function as it would always replace the previous rendered DOM.

See https://reactjs.org/docs/react-dom.html

The right way to do is to create multiple components and import them into App.js file. Then, your index.js file is supposed to import App.js file
as one whole component, with ReactDOM only renders App.js as a single component.

edited Mar 22 at 2:19

answered Mar 22 at 1:57

tnkh

220110

Thanks for the answer and detail. This is a lack of understanding of the DOM details, but if I were targeting different container div tags as shown in the index.js tag that only existed on independent pages, wouldn't this be a single ReactDOM render per DOM? Or is the DOM storing information across the pages? Also, do you mind elaborating on the create multiple component and import them into app.js. So you are saying import components into my server file and then import the server into my react index.js file?

– cphill
Mar 22 at 12:59

Okay could you explain more of what you mean by targeting different container div tags as shown in the index.js tag that only existed on independent pages ?

– tnkh
Mar 24 at 14:54

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
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55291712%2freactjs-reactdom-render-for-separate-pages%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

ReactDOM renders a React element into the DOM in the supplied container 
and return a reference to the component (or returns null for stateless 
components). If the React element was previously rendered into 
container , this will perform an update on it and only mutate the DOM 
as necessary to reflect the latest React element.

Technically speaking you cant render more than one React element into the DOM with multiple ReactDOM render function as it would always replace the previous rendered DOM.

See https://reactjs.org/docs/react-dom.html

edited Mar 22 at 2:19

answered Mar 22 at 1:57

tnkh

220110

Thanks for the answer and detail. This is a lack of understanding of the DOM details, but if I were targeting different container div tags as shown in the index.js tag that only existed on independent pages, wouldn't this be a single ReactDOM render per DOM? Or is the DOM storing information across the pages? Also, do you mind elaborating on the create multiple component and import them into app.js. So you are saying import components into my server file and then import the server into my react index.js file?

– cphill
Mar 22 at 12:59

Okay could you explain more of what you mean by targeting different container div tags as shown in the index.js tag that only existed on independent pages ?

– tnkh
Mar 24 at 14:54

add a comment |

ReactDOM renders a React element into the DOM in the supplied container 
and return a reference to the component (or returns null for stateless 
components). If the React element was previously rendered into 
container , this will perform an update on it and only mutate the DOM 
as necessary to reflect the latest React element.

Technically speaking you cant render more than one React element into the DOM with multiple ReactDOM render function as it would always replace the previous rendered DOM.

See https://reactjs.org/docs/react-dom.html

edited Mar 22 at 2:19

answered Mar 22 at 1:57

tnkh

220110

Thanks for the answer and detail. This is a lack of understanding of the DOM details, but if I were targeting different container div tags as shown in the index.js tag that only existed on independent pages, wouldn't this be a single ReactDOM render per DOM? Or is the DOM storing information across the pages? Also, do you mind elaborating on the create multiple component and import them into app.js. So you are saying import components into my server file and then import the server into my react index.js file?

– cphill
Mar 22 at 12:59

Okay could you explain more of what you mean by targeting different container div tags as shown in the index.js tag that only existed on independent pages ?

– tnkh
Mar 24 at 14:54

add a comment |

ReactDOM renders a React element into the DOM in the supplied container 
and return a reference to the component (or returns null for stateless 
components). If the React element was previously rendered into 
container , this will perform an update on it and only mutate the DOM 
as necessary to reflect the latest React element.

Technically speaking you cant render more than one React element into the DOM with multiple ReactDOM render function as it would always replace the previous rendered DOM.

See https://reactjs.org/docs/react-dom.html

edited Mar 22 at 2:19

answered Mar 22 at 1:57

tnkh

220110

ReactDOM renders a React element into the DOM in the supplied container 
and return a reference to the component (or returns null for stateless 
components). If the React element was previously rendered into 
container , this will perform an update on it and only mutate the DOM 
as necessary to reflect the latest React element.

Technically speaking you cant render more than one React element into the DOM with multiple ReactDOM render function as it would always replace the previous rendered DOM.

See https://reactjs.org/docs/react-dom.html

edited Mar 22 at 2:19

answered Mar 22 at 1:57

tnkh

220110

edited Mar 22 at 2:19

answered Mar 22 at 1:57

tnkh

220110

answered Mar 22 at 1:57

tnkh

220110

answered Mar 22 at 1:57

tnkh

220110

Thanks for the answer and detail. This is a lack of understanding of the DOM details, but if I were targeting different container div tags as shown in the index.js tag that only existed on independent pages, wouldn't this be a single ReactDOM render per DOM? Or is the DOM storing information across the pages? Also, do you mind elaborating on the create multiple component and import them into app.js. So you are saying import components into my server file and then import the server into my react index.js file?

– cphill
Mar 22 at 12:59

Okay could you explain more of what you mean by targeting different container div tags as shown in the index.js tag that only existed on independent pages ?

– tnkh
Mar 24 at 14:54

add a comment |

Thanks for the answer and detail. This is a lack of understanding of the DOM details, but if I were targeting different container div tags as shown in the index.js tag that only existed on independent pages, wouldn't this be a single ReactDOM render per DOM? Or is the DOM storing information across the pages? Also, do you mind elaborating on the create multiple component and import them into app.js. So you are saying import components into my server file and then import the server into my react index.js file?

– cphill
Mar 22 at 12:59

Okay could you explain more of what you mean by targeting different container div tags as shown in the index.js tag that only existed on independent pages ?

– tnkh
Mar 24 at 14:54

Thanks for the answer and detail. This is a lack of understanding of the DOM details, but if I were targeting different container div tags as shown in the index.js tag that only existed on independent pages, wouldn't this be a single ReactDOM render per DOM? Or is the DOM storing information across the pages? Also, do you mind elaborating on the create multiple component and import them into app.js. So you are saying import components into my server file and then import the server into my react index.js file?

– cphill
Mar 22 at 12:59

Okay could you explain more of what you mean by targeting different container div tags as shown in the index.js tag that only existed on independent pages ?

– tnkh
Mar 24 at 14:54

add a comment |

draft saved

draft discarded

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.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Styjun

1 Answer
1

Your Answer

Post as a guest

1 Answer
1

1 Answer
1

Post as a guest

Popular posts from this blog

Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

1 Answer 1

1 Answer 1

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Popular posts from this blog

Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

1 Answer
1

1 Answer
1

1 Answer
1