How to render a react component on any other page other than index.html

问题

I created a basic react app with

npx create-react-app

I can create components in the index.js and I'm able to render them to an element in the index.html.

However that's the only page I can render them too, I can't for example use the same component on the login.html page or any other page other than index.html

I'm testing this with npm start.

回答1:

Commonly React is used for single page applications, so you just render the app in a single page, then use routing (with react-router commonly) for simulate browser navigation.

However you can render it on multiple pages... you only need to copy your activation JavaScript on other pages

Just copy this on your login.html (taken from default create-react-app output):

<noscript>
  You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/bundle.js"></script>

回答2:

Why would you need this? Remember that React, for his own nature, claims to be a SPA (Single Page Application). This should be enough to let you understand that the single page is (should be) index.html.

Anyway, you can do it by looking at the default index.html file created by create-react-app and also at the manifest.json file.

Starting by the manifest.json, you should have this JSON:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Or something like this. You can se a "start_url" property, which is the starting point that create-react-app webpack dev-server will, by default, serve to you when you request ANY path at the local address you are running it (localhost:3000 normally). By changing this property, you can make it serve the page you want, e.g. login.html.

Now, looking at index.html default code you should have something like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

As you can see, at the end of the page there is a

<div id="root"></div>

Which is exactly where React renders what ReactDOM.render(jsx, ElementID) jsx is. In fact, if you look in index.js, ReactDOM is like:

ReactDOM.render(
    <Something />,
, document.getElementByID('root'));

You can see that ElementID ('root') is the id of the div element where you want to render the jsx (). If you create a new page, say login.html, copy-paste the index.html content and change the element ID, you can then choose to render your content there changing also the referral ElementID of ReactDOM.render(). Working on this you should get the result you want to, but as said before, in my opinion you shouldn't need this.

来源：https://stackoverflow.com/questions/50234042/how-to-render-a-react-component-on-any-other-page-other-than-index-html

标签

reactjs

react-component