React Router rendering blank pages for all components-CodePudding

I am currently following a tutorial on react-router-dom and whenever I placed my three routes into Router, I keep getting blank pages on all three routes when pulling up localhost. I am using path and element to configure the routes with ternary operators inside of the element attribute but I am still getting a blank page upon render. Any idea why this is happening? Thanks!

App.js

import React, { Fragment, useState, useEffect } from "react";

import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect
} from "react-router-dom";


//components

import Login from "./components/Login";
import Register from "./components/Register";
import Dashboard from "./components/Dashboard";


function App() {
  const checkAuthenticated = async () => {
    try {
      const res = await fetch("http://localhost:5000/auth/verify", {
        method: "GET",
        headers: { token: localStorage.token }
      });

      const parseRes = await res.json();

      parseRes === true ? setIsAuthenticated(true) : setIsAuthenticated(false);
    } catch (err) {
      console.error(err.message);
    }
  };

  useEffect(() => {
    checkAuthenticated();
  }, []);

  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const setAuth = boolean => {
    setIsAuthenticated(boolean);
  };

  return (
    <Fragment>
      <Router>
        <div className="container">
          <Switch>
            <Route
              path="/login"
              element={
                !isAuthenticated ? (
                  <Login setAuth={setAuth} />
                ) : (
                  <Redirect to="/dashboard" />
                )
              }
            />
            <Route
              path="/register"
              element={
                !isAuthenticated ? (
                  <Register setAuth={setAuth} />
                ) : (
                  <Redirect to="/dashboard" />
                )
              }
            />
            <Route
              path="/dashboard"
              element={
                isAuthenticated ? (
                  <Dashboard setAuth={setAuth} />
                ) : (
                  <Redirect to="/login" />
                )
              }
            />
          </Switch>
        </div>
      </Router>
    </Fragment>
  );
}

export default App;

CodePudding user response：

The Route component in react-router-dom@5 doesn't have an element prop, element is a v6 prop.

Use the `render function prop instead.

Example:

<Switch>
  <Route
    path="/login"
    render={props => !isAuthenticated
      ? (
        <Login setAuth={setAuth} {...props} />
      ) : (
        <Redirect to="/dashboard" />
      )     
    }
  />
  <Route
    path="/register"
    render={props => !isAuthenticated
      ? (
        <Register setAuth={setAuth} {...props} />
      ) : (
        <Redirect to="/dashboard" />
      )
    }
  />
  <Route
    path="/dashboard"
    render={props => isAuthenticated
      ? (
        <Dashboard setAuth={setAuth} {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
</Switch>

Update

The unauthenticated state likely matches your initial state before the auth status has been confirmed. Use an initial isAuthenticated state value that is neither authenticated nor unauthenticated, i.e. neither true nor false. Use this "third" state value to conditionally render null or some other loading indicator while the auth status is resolved.

Example:

const [isAuthenticated, setIsAuthenticated] = useState();

if (isAuthenticated === undefined) {
  return null; // or loading spinner, etc...
}

return (
  ... routes & UI ...
);