How do I create multiple pages within my domain using React?

When a user goes to my domain www.example.com they see my webpage I created using React. I want to use React to show them a different webpage when they go to www.example.com/anotherpage instead.

This is the code I have in my index.js file which creates the webpage at www.example.com,

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

Answer

There are multiple solution for this, if you are creating an SPA with create-react-app, then one of the most popular solution is by using react-router.

As shown in the example, then the basic routing is like this:

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Route Home</h2>;
}

function About() {
  return <h2>Route About</h2>;
}

function Users() {
  return <h2>Route Users</h2>;
}

However if you are using another framework such as Next.js, then they have the filesystem pages where creating a page under /pages/ folder will create a new route.