Reactjs – React Host page a blank page

That’s because you are using <Link></Link> tag in your home component but you have not yet set up routes in your App.jsx. If you would check your console, you will see all the errors.

You can set up your App.js like this:

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

function App() {
    return (
        <div className="App">
            <BrowserRouter>
                <Routes>
                    <Route path="/" element={<Home />} />
                     // Other routes here like marketplace, 
                        settings ect
                </Routes>
            </BrowserRouter>
        </div>
    );
}

export default App;

Also for the Home component, the standard practice is to use '/' for the path. This way we make sure home is the first thing to show up when your app renders.

I noticed that you have included the Navbar in your home component. Instead, you should have made a new Navbar component which will only include the Navbar, and put it in App.jsx before defining routes. This way, the Navbar remains the same all across the App.

Something like this:

Navbar.jsx

import React from 'react';
import { Link } from 'react-router-dom';

const Navbar = () => {
    return (
        <nav className="navbar">
            <ul className="nav-list">
                <li>
                    <Link to="/">Home</Link>
                </li>
                <li>
                    <Link to="/marketplace">Marketplace</Link>
                </li>
                <li>
                    <Link to="/settings">Settings</Link>
                </li>
                <li>
                    <Link to="/profile">Profile</Link>
                </li>
                <li>
                    <Link to="/chat">Chat</Link>
                </li>
            </ul>
            <div className="rightNav">
                <input type="text" name="search" id="search" placeholder="Search" />
                <button className="btn btn-sm">Search</button>
            </div>
        </nav>
    );
};

export default Navbar;

App.jsx

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import './App.css';
import Navbar from './components/Navbar';
import Home from './home';

function App() {
    return (
        <div className="App">
            <BrowserRouter>
                <Navbar />
                <Routes>
                    <Route path="/" element={<Home />} />
                     // Other routes here like marketplace, 
                        settings ect
                </Routes>
            </BrowserRouter>
        </div>
    );
}

export default App;

home.jsx

import React from 'react';
import { Link } from 'react-router-dom';

function Home() {
    return (
        <div>
            <main>
                <section className="new-items">
                    <h2>New Items</h2>
                    <Link to="/marketplace" className="button-link">
                        <button>Browse Items</button>
                    </Link>
                </section>

                <section className="my-saved">
                    <h2>My Saved</h2>
                    <button>View Saved</button>
                </section>
            </main>
        </div>
    );
}

export default Home;

Navbar will always be the same so we don’t have to include it in every page, instead put it at the top of your router. All the pages inside router, will render beneath the Navbar. If you want you can make a Footer component as well and put it at the bottom. Like this:

App.jsx

function App() {
    return (
        <div className="App">
            <BrowserRouter>
                <Navbar />
                <Routes>
                    <Route path="/" element={<Home />} />
                     // Other routes here like marketplace, 
                        settings ect
                </Routes>
                <Footer/>
            </BrowserRouter>
        </div>
    );
}