React JS Navigation Example
User
react js add new page without router
Assistant
In React, if you want to **add a new page or component without using a router like React Router**, you can handle navigation manually by using **conditional rendering** based on a state variable.
Here’s a simple example to demonstrate this:
—
### ✅ Step-by-step Example: React Page Without Router
import React, { useState } from 'react';
function App() {
const [currentPage, setCurrentPage] = useState('home');
const goToPage = (page) => {
setCurrentPage(page);
};
return (
<div>
<nav>
<button onClick={() => goToPage('home')}>Home</button>
<button onClick={() => goToPage('about')}>About</button>
<button onClick={() => goToPage('contact')}>Contact</button>
</nav>
<div>
{currentPage === 'home' && <HomePage />}
{currentPage === 'about' && <AboutPage />}
{currentPage === 'contact' && <ContactPage />}
</div>
</div>
);
}
function HomePage() {
return <h1>Welcome to the Home Page</h1>;
}
function AboutPage() {
return <h1>About Us</h1>;
}
function ContactPage() {
return <h1>Contact Information</h1>;
}
export default App;—
### 🔍 Key Concepts:
– **No router library used.**
– Navigation handled using `useState`.
– Components are conditionally rendered based on the selected page.
—
If you want this to work with browser navigation (e.g., back button), then using a full routing library like **React Router** is recommended. But for simple cases or embedded apps, this pattern works well.
Let me know if you want to use this with URL hashes or local storage as well!