Blank page is displayed instead of Bootstrap Navbar that I am trying to create with React Router

user_16542113 0
Viewed 79

I am trying to create a navbar using Bootstrap and React. Even though my code is compiled without any errors the webpage that is rendered is completely blank. Please see my code below for reference:

app.js:

import React, { Component } from "react";
import { useState } from "react";
import logo from "./logo.svg";
import { Routes, Route, Link } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";

import AddReview from "./components/add-review";
import RestaurantlLst from "./components/restaurant-list";
import Restaurants from "./components/restaurants";
import Login from "./components/login";

function App() {
  const [user, setUser] = useState(null);

  async function login(user = null) {
    setUser(user);
  }

  async function logout() {
    setUser(null);
  }

  return (
    <div>
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">
          Restaurant Reviews
        </a>

        <div class="navbar-nav mr-auto">
          <li class="nav-item">
            <Link to={"/restaurants"}>Restaurants</Link>
          </li>
          <li class="nav-item">
            {user ? (
              <a
                onClick={logout}
                className="nav-link"
                style={{ cursor: "pointer" }}
              >
                Logout {user.name}
              </a>
            ) : (
              <Link to={"/login"} className="nav-link">
                Login
              </Link>
            )}
          </li>
        </div>
      </nav>

      <div className="container mt-3">
        <Routes>
          <Route
            exact
            path={["/", "/restaurants"]}
            component={RestaurantlLst}
          />

          <Route
            path="/restaurants/:id/review"
            render={(props) => <AddReview {...props} user={user} />}
          />

          <Route
            path="/restaurants/:id"
            render={(props) => <Restaurants {...props} user={user} />}
          />
          <Route
            path="/login"
            render={(props) => <Login {...props} user={user} />}
          />
        </Routes>
      </div>
    </div>
  );
}

export default App;

index.js:

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

All of the components are similar, as given below:

Login component:

import React from "react";

function Login() {
  return <div>Login</div>;
}

export default Login;

What am I doing wrong ?

react-router-dom bootstrap-4 reactjs javascript
1 Answers

The Route component API changed in v6, there isn't any component or render prop now, they were replaced by a single element prop taking a ReactNode, a.k.a. JSX. The path prop now also only takes a single path string, not an array.

<Routes>
  <Route
    path="/"
    element={<RestaurantlLst />}
  />
  <Route
    path="/restaurants"
    element={<RestaurantlLst />}
  />
  <Route
    path="/restaurants/:id/review"
    element={<AddReview user={user} />}
  />
  <Route
    path="/restaurants/:id"
    element={<Restaurants user={user} />}
  />
  <Route
    path="/login"
    render={<Login user={user} />}
  />
</Routes>

If these components need to access "route props" these also no longer exist. They should use the React hooks that replaced them if they need to access location, params, etc.

Another way to structure the routes is to use layout and index routes:

Example:

<Routes>
  <Route path="/">
    <Route index element={<Navigate to="restaurants" replace />} />
    <Route path="restaurants">
      <Route index element={<RestaurantlLst />} />
      <Route path=":id">
        <Route index element={<Restaurants user={user} />} />
        <Route path="review" element={<AddReview user={user} />} />
      </Route>
    </Route>
  </Route>
  <Route
    path="/login"
    render={<Login user={user} />}
  />
</Routes>
user_86908570
Related