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