import React, { Fragment, useState } from "react";
import "./App.css";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Home from "./components/Home";
import Login from "./components/Login";
import Register from "./components/Register";
function App() {
const [isAuthenticated, setAuthenticated] = useState(false);
function App() {
const [isAuthenticated, setAuthenticated] = useState(false);
return (
<Fragment>
<Router>
<div className="container">
<Routes>
<Route
exact
path="/login"
element={props => !isAuthenticated ? <Login {...props}/> :<Link to="/home" />}
/>
<Route
exact
path="/register"
element={props => !isAuthenticated ? <Register {...props} /> : <Link to="/login" />}
/>
<Route
exact
path="/home"
element={props => !isAuthenticated ? <Home {...props} />: <Link to="/login" />}
/>
</Routes>
</div>
</Router>
</Fragment>
);
}
export default App;
function App(props){
//props accessible now to the functional component
return(
//your code...
{
!(isAuthenticated)?
<Routes>
<Route
exact
path="/login"
element={<Login {...props}/>}
/>
//other unauthenticated routes
</Routes>
:
<Routes>
<Route
exact
path="/login"
element={<Link to="/home" />}
/>
//other authenticated routes
</Routes>
}
)
}