How do I add pages in react [closed] - reactjs

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 months ago.
Improve this question
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?

Answer 1

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>
<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>
</>
)
}

Answer 2

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>;
}