Question 256079 in Html Question posted in
Some basic documentation can be found here.

How to Build a React Application with Multiple HTML Files?

The project I am currently working on is the first React project i’ve worked on. I have a lot of experince with backend and some with front end. The backend I have already written strongly relies on diffrent html pages / end point urls. (There are other Stackoverflow posts about a simular topic but I would rather not have to eject my program.

My current render:

import React, { StrictMode } from "react";
import ReactDOM from 'react-dom';
import "./styles.css";

import Login from "./Pages/Login"
import Reset from './Pages/Reset';

ReactDOM.render(<StrictMode><Login /></StrictMode>, document.getElementById('login'));
ReactDOM.render(<StrictMode><Reset /></StrictMode>, document.getElementById('reset'));

Then I have two html files one that has a div login and one that has div reset but only the index.html or login one works when i move the built files to the backend.
(I use react because it makes it a lot easier to make clean webpages)

I haven’t really tried very much, I have looked into other ways but all the tutorials / articals I have found have been very outdated.

Tags:

4

Answers


  1. 0

    you can use:

    Routes, Route to make Route for change between different pages:

     import {BrowserRouter,Routes,Route} from 'react-router-dom';
 
 import Login from "./Pages/Login"
 import Reset from './Pages/Reset';

  <BrowserRouter>
   <Routes>
     <Route path="/home" element={<Login/>}/>
     <Route path="/Reset" element={<Reset/>}/>
   </Routes>
  </BrowserRouter>
    Login or Signup to reply.
  2. 0

    React is used to build, specifically, Single Page Applications (SPAs). So your attempt at building two index.html, i.e. two different SPAs seems strange.

    Since you’ve decided to build two different index.html, you can do this by building each component one at a time by commenting the other ReactDOM.render line.

    ReactDOM.render(<StrictMode><Login /></StrictMode>, document.getElementById('login'));
// ReactDOM.render(<StrictMode><Reset /></StrictMode>, document.getElementById('reset'));

    // ReactDOM.render(<StrictMode><Login /></StrictMode>, document.getElementById('login'));
ReactDOM.render(<StrictMode><Reset /></StrictMode>, document.getElementById('reset'));
    Login or Signup to reply.
  3. 0

    I think you should only have one HTML to setup React/JS which should have only <div id="root"></div> (id name should be constant with the js id). The two HTML that you have, u should rewrite them in JSX and either have them in the js file that you use here or have each of them have a js file and link them. Here is an example of how it should be.

    import React from ‘https://esm.sh/[email protected]’
    import ReactDOM from ‘https://esm.sh/[email protected]’

    const App=()=>{
  
  return(
    <div>
  <div className="login">
      <button>
        Login
      </button>
  </div>
    <div className="login">
      <button>
        Reset
      </button>
  </div>
      </div>
  )
  
      
}
ReactDOM.render(<App />, document.getElementById("root"));
    Login or Signup to reply.
  4. 0

    In React you only need single index.html file.

    public/index.html

    <!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>
</html>

    In order to make multiple urls work in React, use a library called react-router-dom.

    index.js

    import React, { StrictMode } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "./styles.css";

import Login from "./Pages/Login"
import Reset from './Pages/Reset';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login/>} />
        <Route path="/reset" element={<Reset/>} />
      </Routes>
    </BrowserRouter>
  );
}

ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById("root")
);

    Remaining html files you want as pages, you can convert to React components files like below.

    Login.js

    import React from "react";

function Login() {
  return <div>Login Page</div>;
}

export default Login;

    Reset.js

    import React from "react";

function Reset() {
  return <div>Reset Page</div>;
}

    Full source code including build and deploy using docker: https://github.com/hisanibrahim/react-router-app

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search