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>
reactjs
asked Mar 22 at 1:44
cphillcphill
1,69963881
add a comment |
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>
reactjs
asked Mar 22 at 1:44
cphillcphill
1,69963881
add a comment |
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>
reactjs
asked Mar 22 at 1:44
cphillcphill
1,69963881
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>
reactjs
reactjs
asked Mar 22 at 1:44
cphillcphill
1,69963881
asked Mar 22 at 1:44
cphillcphill
1,69963881
asked Mar 22 at 1:44
cphillcphill
1,69963881
asked Mar 22 at 1:44
cphillcphill
1,69963881
asked Mar 22 at 1:44
cphillcphill
1,69963881
1,69963881
add a comment |
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.
answered Mar 22 at 1:57
tnkhtnkh
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 theindex.jstag 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 intoapp.js. So you are saying import components into my server file and then import the server into my reactindex.jsfile?
– cphill
Mar 22 at 12:59
Okay could you explain more of what you mean bytargeting 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
);
);
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%2f55291712%2freactjs-reactdom-render-for-separate-pages%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
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.
answered Mar 22 at 1:57
tnkhtnkh
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 theindex.jstag 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 intoapp.js. So you are saying import components into my server file and then import the server into my reactindex.jsfile?
– cphill
Mar 22 at 12:59
Okay could you explain more of what you mean bytargeting 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
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.
answered Mar 22 at 1:57
tnkhtnkh
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 theindex.jstag 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 intoapp.js. So you are saying import components into my server file and then import the server into my reactindex.jsfile?
– cphill
Mar 22 at 12:59
Okay could you explain more of what you mean bytargeting 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
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.
answered Mar 22 at 1:57
tnkhtnkh
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
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.
answered Mar 22 at 1:57
tnkhtnkh
220110
edited Mar 22 at 2:19
answered Mar 22 at 1:57
tnkhtnkh
220110
answered Mar 22 at 1:57
tnkhtnkh
220110
answered Mar 22 at 1:57
tnkhtnkh
220110
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 theindex.jstag 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 intoapp.js. So you are saying import components into my server file and then import the server into my reactindex.jsfile?
– cphill
Mar 22 at 12:59
Okay could you explain more of what you mean bytargeting 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 theindex.jstag 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 intoapp.js. So you are saying import components into my server file and then import the server into my reactindex.jsfile?
– cphill
Mar 22 at 12:59
Okay could you explain more of what you mean bytargeting 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
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
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 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%2f55291712%2freactjs-reactdom-render-for-separate-pages%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
