Question 73688 in Reactjs Question posted in
The new location for the React Documentation can be found here.

I can't render my website with Home "router" as a default page – Reactjs

I have a website that uses react router dom.The routes work properly but I can’t set Home router as the main page, when I download the website, the main page is an empty background. I have checked that the Home router is the first and apparently the path is correct: "/". Can somebody help me to find the problem? Thanks a lot.

App.js

import { Home } from "./components/pages/home/home.js";
import { Nav } from "./components/pages/navbar/navBar.js";
import { Reviews } from "./components/pages/review.js";
import { About } from "./components/pages/aboutUs";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import React from "react";

function App() {
  return (
    <section className="App">
      <BrowserRouter>
        <Nav />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/aboutUs" element={<About />} />
          <Route path="/review" element={<Reviews />} />
        </Routes>
      </BrowserRouter>
    </section>
  );
}

export default App;

home.js

import React from "react";
import "./home.css";
import Carousel from "../../../components/carrousel/carousel";

export function Home() {
  const slides = [
    "https://i.ytimg.com/vi/DCOICaqQoEY/maxresdefault.jpg",
    "https://unfilteredgamer.com/wp-content/uploads/2022/03/terraforming-mars-ares-expedition-review-header.jpg",
    "https://gamecows.com/wp-content/uploads/2022/06/Ark-Nova-Board-Game-Featured.jpg",
  ];
  return (
    <div className="container">
      <div className="home">
        <div className="home-inner">
          <Carousel slides={slides} />
        </div>
        <div className="quotes">
          <img
            src="https://ih1.redbubble.net/image.1889966854.5963/poster,504x498,f8f8f8-pad,600x600,f8f8f8.jpg"
            alt="gamer-quote-1"
          ></img>
          <img
            src="https://ih1.redbubble.net/image.967398882.3526/st,small,507x507-pad,600x600,f8f8f8.jpg"
            alt="gamer-quote-2"
          ></img>
          <img
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8_bOcNKvjb-NyMlFwqxOkfCPieb1CJcLImN1CsyPqtLXrk7lTn1BG_fUTso1W-SCoblo&usqp=CAU"
            alt="gamer-quote-3"
          ></img>
        </div>
      </div>
    </div>
  );
}

NavBar.js

import React, { useState } from "react";
import { Link } from "react-router-dom";
import "./navBar.css";

export const Nav = () => {
  const [showMenu, setShowMenu] = useState(false);

  const toggleMenu = () => {
    setShowMenu(!showMenu);
  };

  return (
    <nav className="nav">
      <button className="navbar-toggle" onClick={toggleMenu}>
        <i className="bi bi-menu-button-fill"></i>
        {showMenu && (
          <div className="navbar-collapse" id="navbar-collapse">
            <ul className="navbar-nav">
              <li className="nav-item">
                <Link className="nav-link" to="/">
                  Home
                </Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/review">
                  Review
                </Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/aboutUs">
                  About Us
                </Link>
              </li>
            </ul>
          </div>
        )}
      </button>
    </nav>
  );
};
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found it! the website wasn't redirecting well, so I include in App.js

     import { Navigate } from "react-router-dom";

    I put in function App another route path that redirects to "/home"

       <Route path="*" element={<Navigate to="/" />} />

    And it works perfect


  2. 0

    If you are hosting your app from a sub-directory on the hosting service/server, e.g. "http://host-domain.com/board-game-website" then you could likely benefit from specifying a basename prop on the router so that all routes and links function relative from this path.

    See Router

    The <Router basename> prop may be used to make all routes and links
    in your app relative to a "base" portion of the URL pathname that they
    all share. This is useful when rendering only a portion of a larger
    app with React Router or when your app has multiple entry points.
    Basenames are not case-sensitive.

    function App() {
  return (
    <section className="App">
      <BrowserRouter basename="/board-game-website">
        <Nav />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/aboutUs" element={<About />} />
          <Route path="/review" element={<Reviews />} />
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </BrowserRouter>
    </section>
  );
}

    Note that this fixes when the app is running from the deployment host/server, but will now have odd behavior when running locally. You can do two things:

    1. Update the homepage entry in the package.json file to include the basename

      ...
"homepage": "./board-game-website",
...

    2. Ensure you navigate to the basename locally if this doesn’t automagically occur.

      "http://localhost:3000/board-game-website"

    You’ll likely want to also keep the "catch-all" route around to bounce users to the app’s home page for any other routes the app doesn’t explicitly handle.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search