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