Search code examples
htmltypescriptreact-nativejsxtsx

How to serve multiple HTML files with React?


I want to build a web application with React with multiple HTML pages. For example login.html and index.html. I've created these HTML pages and mapped them to URIs with my backend. So I have localhost:8080/login and localhost:8080/index. Unfortunately, React only uses the index.html file to render content!

So index.html works and the React content is shown: localhost:3000/index.html

<!-- index.html -->
...
<body>
  <noscript>
      You need to enable JavaScript to run this app.
  </noscript>
  <div id="wizard"></div>
</body>
...

<!-- index.tsx -->
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import FetchData from "./FetchData";
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
<div className="d-flex flex-column">
            <div className="bg-dark text-light AppHeading">Self-Service-Webwizard</div>
            <div className="bg-white"><FetchData /></div>
        </div>,
document.getElementById('wizard') as HTMLElement
);
registerServiceWorker();

But wizardLogin.html doesn't show the React content: localhost:3000/wizardLogin.html

<!-- wizardLogin.html -->
...
<body>
  <noscript>
      You need to enable JavaScript to run this app.
  </noscript>
  <div>Wizard login</div>
  <div id="wizardLogin"></div>
</body>
...

<!-- LoginPage.tsx -->
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import LoginForm from "./LoginForm";

ReactDOM.render(
    <div>
        <div><h1>Wizard Login.tsx</h1></div>
        <div><LoginForm/></div>
    </div>,
    document.getElementById('wizardLogin') as HTMLElement
)
;
registerServiceWorker();

Am I doing something wrong or is it not possible to serve multiple HTML files with React?

Github: https://github.com/The-Taskmanager/SelfServiceWebwizard


Solution

  • So far I've learned that React native doesn't support multiple HTML pages because it's an single page application. I kept index.html as single HTML page and solved the issue with conditional rendering in react. When a condition is fullfilled then I'm rendering another React .tsx-file.