import React from 'react';
import { Router } from './Router';
import Home from './Home';
import Contact from './Contact';
import Gallery from './Gallery';
import Login from './Login';

const App = () => {
  return (
    <div>
      <Router />
      {/* Other components */}
      <Home />
      <Contact />
      <Gallery />
      <Login />
    </div>
  );
}

export default App;

import React from 'react';
import { redirect } from './Router';

const Home = () => {
  return (
    <div>
      {/* Example usage of redirect function */}
      <button onClick={() => redirect('home')}>Go to Home</button>
      {/* Your Home component JSX */}
    </div>
  );
}

export default Home;

import React, { useState, useEffect } from 'react';

const Router = ({ Home, Gallery }) => {
    const [hash, setHash] = useState('');

    useEffect(() => {
        const handleHashChange = () => {
            const newHash = window.location.hash.split("#")[1];
            setHash(newHash);
        };

        window.addEventListener('hashchange', handleHashChange);

        // Initialize hash on component mount
        handleHashChange();

        return () => {
            window.removeEventListener('hashchange', handleHashChange);
        };
    }, []);

    const renderComponent = () => {
        switch (hash) {
            case 'home':
                return <Home />;
            case 'gallery':
                return <Gallery />;
            default:
                return null; // Handle other routes or default component
        }
    };

    return renderComponent();
}

export default Router;

import React from 'react';
import Router from './Router';
import Home from './Home';
import Gallery from './Gallery';

const App = () => {
  return (
    <div>
      <Router Home={Home} Gallery={Gallery} />
    </div>
  );
}

export default App;

import React, { useState, useEffect } from 'react';

const Router = ({ routes }) => {
    const [hash, setHash] = useState('');

    useEffect(() => {
        const handleHashChange = () => {
            const newHash = window.location.hash.split("#")[1];
            setHash(newHash);
        };

        window.addEventListener('hashchange', handleHashChange);

        // Initialize hash on component mount
        handleHashChange();

        return () => {
            window.removeEventListener('hashchange', handleHashChange);
        };
    }, []);

    const Component = routes[hash] || null;

    return Component ? <Component /> : null;
}

export default Router;

## Another Way to Handle Route

import React from 'react'; import Router from './Router'; import Home from './Home'; import Gallery from './Gallery';

const App = () => { const routes = { home: Home, gallery: Gallery, // Add more routes here if needed };

return (

); }

export default App;