Rendering multiple DOM elements from different HTML pages in the same app.js

Question

I am a complete newbie with ReactJs or UI coding, in general. I have a single entry point in my ReactJs app - app.js

var React = require("react");
var ReactDOM = require("react-dom");
import Main from "./components/Main";
import Bucket from "./components/Bucket";
import Relay from "react-relay";

ReactDOM.render(<Main />,document.getElementById('react'));
ReactDOM.render(<Bucket />,document.getElementById('react-bucket'));

console.log(Relay.QL`query Test {ServerGroups {_id}}`);

I am trying to render the buckets.html page here :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RGR</title>
<script src="react-0.14.3.min.js"></script>
<script src="react-dom-0.14.3.min.js"></script>
</head>
<body>

<div id="react-bucket"></div>
<script src="bundle.js"></script>
<body>
</html>

When I go to the index.html page, everything renders fine. But when I go to the buckets.html page, I get a

Uncaught Error: _registerComponent(...): Target container is not a DOM element error

When i try to render just one element in app.js (comment out either the Main component render or the Bucket component render) , again, both components render fine. So there is no problem with the components themselves.

There is obviously a problem getting app.js read from both buckets.html and index.html. How can I access buckets.html and index.html in such a situation? Is it even possible?

Thanks!!

jered · Accepted Answer · 2017-07-21 17:49:13Z

1

It's highly problematic to try and split your project into multiple HTML files like that. It sort of defeats one of the superpowers of React - making a SPA or "Single Page App". The "React-ful" way to do this would actually be to use React-Router.

React-Router lets you specify "routes" in your project, so you could have, say, example.com/ and example.com/bucket render different components inside of your project, without having to actually change the page. Check out this demo to get a sense of what I mean.

I highly suggest you do your own research and check out the React-Router docs, but it would probably look something like this:

let App = (
   <Router>
       <Route path="/" component={Main} />
       <Route path="/bucket" component={Bucket} />
   </Router>
);

ReactDOM.render(App, document.getElementById('react'));

Now when you go to example.com/, React will render the <Main /> component, and if you go to example.com/bucket it will render <Bucket />. This is a highly simplified example - there are other things to consider like <Link />s, default routes, 404, server side handling, etc. But this is pretty much exactly what you need, very modern, and tailor made for React.

answered Jul 21, 2017 at 17:49

jered

11.6k2 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2405589 Over a year ago

Thanks! I'll have a look through and hopefully be able to change the app to have this to work.

Shubham Khatri · Accepted Answer · 2017-07-21 17:43:03Z

0

The problem is evident as the error suggests , you are trying to render the Main component in an Element with id React but it doesn't exist in your HTML file

Add it in HTML file like

<body>
<div id="react"></div>
<div id="react-bucket"></div>
<script src="bundle.js"></script>
<body>

answered Jul 21, 2017 at 17:43

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

2 Comments

user2405589 Over a year ago

Thanks for your response. But the problem is not with the html, but whether it is possible for single app.js render from multiple htmls. What is the best way to render different pages, if not? One option is to use react-router.

Shubham Khatri Over a year ago

You can have as many ReactDOM.render as you need, but in this kind of situation I prefer using ReactRouter

ta11ey · Accepted Answer · 2017-07-21 17:44:02Z

0

ReactDOM.render(<Main />,document.getElementById('react'));

There is no Dom element by the Id of 'react'

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
<title>RGR</title>
<script src="react-0.14.3.min.js"></script>
<script src="react-dom-0.14.3.min.js"></script>
</head>
<body>
  <div id="react"></div>
  <div id="react-bucket"></div>
<script src="bundle.js"></script>
<body>
</html>

This should work just fine if the components are correct on their own

answered Jul 21, 2017 at 17:44

ta11ey

312 bronze badges

1 Comment

user2405589 Over a year ago

Thanks for your response. But the problem is not with the html, but whether it is possible for single app.js render from multiple htmls. What is the best way to render different pages, if not? One option is to use react-router.

Collectives™ on Stack Overflow

Rendering multiple DOM elements from different HTML pages in the same app.js

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related