React Router rendering blank pages for all components

Question

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;

Are you using React 18? Does this help answer your question? https://stackoverflow.com/a/71833424/8690857 — Drew Reese, May 09 '22 at 16:50
Now i get this error along with the blank pages: - - react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. — SupraCoder, May 09 '22 at 16:53

Drew Reese · Accepted Answer · 2022-05-09T17:09:40.233

1

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 ...
);

edited May 09 '22 at 17:09

answered May 09 '22 at 16:54

Drew Reese

165,259
14
153
181

My login component and register component now render but my dashboard component do not render still – SupraCoder May 09 '22 at 17:03
1

@SupraCoder This is usually caused by having the the unauthenticated state value match that when the authentication status is unknown. You'll want to use either a loading state or set the `isAuthenticated` initial state value to something *other than* a value that matches authenticated or unauthenticated, and conditionally render a loading indicator or null until the auth status is confirmed. I'll add an update to my answer with example. – Drew Reese May 09 '22 at 17:06
The component now renders! However, it will only render after i refresh the page, upon initial render it is still blank but progress is being made! How would i have it render upon initial render and not after I refresh? – SupraCoder May 09 '22 at 17:18
1

Nvm, fixed it! it was a CORS issue :) – SupraCoder May 09 '22 at 17:24

React Router rendering blank pages for all components

1 Answers1

Update