How do I add pages in react-CodePudding

I'm new to web development but I've built a website using react and I can't figure out how to add a page to it. Do I add it in app.js or do I need another file? Are there any examples that can explain this?

CodePudding user response：

For adding a page, You need to install and use the react-router-dom in your react application.

Initially, You need to install react-router-dom. Run a below command to install the same,

npm install react-router-dom

Then configure the routing in App.js. Each route defines a seperate page. The Layout route alone will be in the top layer. That is for Layout setup. We will wrapping all the routes inside the Layout route and in the Layout component we will be providing where the contents of Home and About will be displayed.

App.js

import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './Components/Home'
import About from './Components/About'
import Layout from './Components/Layout'


function App() {
  return (
    <div className="App">

      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route path="/" element={<Home />} />
            <Route path="about" element={<About />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

Layout.jsx

import { Outlet, Link } from 'react-router-dom'
export default function Layout() {
    return (
        <>

            <Link to="/">Home</Link>&nbsp;&nbsp;&nbsp;
            <Link to="/about">About</Link>
            <Outlet />
        </>
    )
}

Home.jsx

export default function Home() {
    return (
        <>

            <p>This is Home</p>
        </>
    )
}

About.jsx

export default function About() {
    return (
        <>
            <p>This is About Us</p>
        </>
    )
}

CodePudding user response：

You can create components or separate pages based on your requirement. For routing-related stuff, you can use react-router-dom https://v5.reactrouter.com/web/guides/quick-start.

Example :

App.js

    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>
    
            {/* A <Switch> looks through its children <Route>s and
                renders the first one that matches the current URL. */}
            <Switch>
              <Route path="/about">
                <About />
              </Route>
              <Route path="/users">
                <Users />
              </Route>
              <Route path="/">
                <Home />
              </Route>
            </Switch>
          </div>
        </Router>
      );
    }

Home.js

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

About.js

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

Users.js

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