Skip to content

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

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

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

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



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,
} from "react-router-dom";

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

          <Route path="/about">
            <About />
          <Route path="/users">
            <Users />
          <Route path="/">
            <Home />

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.

User contributions licensed under: CC BY-SA
5 People found this is helpful