feat: redirect route example

src/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link, BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { Link, BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
 import './App.css';
 
 const users = [
@@ -74,27 +74,56 @@ const NoMatchPage = () => {
   );
 };
 
-const PropsPage = ({title}) => {
+const PropsPage = ({ title }) => {
   return (
     <h3>{title}</h3>
   );
 };
 
+const RedirectPage = () => {
+  return (
+    <h3>Redirect Page</h3>
+  );
+};
+
+const AuthPage = ({ isLoggedIn }) => {
+  if (isLoggedIn) {
+    return (
+      <Redirect to="/dashboard" />
+    );
+  } else {
+    return (
+      <h3>User not loggedin</h3>
+    );
+  }
+};
+
+const DashboardPage = () => {
+  return (
+    <h3>Dashboard Page</h3>
+  );
+};
+
 const App = () => {
   return (
     <section className="App">
       <Router>
-        <div>
+        <div style={{ marginBottom: '10px' }}>
           <Link to="/">Home</Link>
           <Link to="/about">About</Link>
           <Link to="/users">Users</Link>
           <Link to="/search?q=react">Search</Link>
           <Link to="/404-not-found">404</Link>
         </div>
-        <div>
+        <div style={{ marginBottom: '10px' }}>
           <Link to="/props-through-component">Props through component</Link>
           <Link to="/props-through-render">Props through render</Link>
         </div>
+        <div style={{ marginBottom: '10px' }}>
+          <Link to="/old-route">Redirecting to New page</Link>
+          <Link to="/auth-not-loggedin">Not Loggedin</Link>
+          <Link to="/auth-loggedin">User Loggedin</Link>
+        </div>
         <Switch>
           <Route exact path="/" component={IndexPage} />
           <Route exact path="/users" component={UsersPage} />
@@ -103,6 +132,11 @@ const App = () => {
           <Route exact path="/search" component={SearchPage} />
           <Route exact path="/props-through-component" component={() => <PropsPage title={`Props through component`} />} />
           <Route exact path="/props-through-render" render={(props) => <PropsPage {...props} title={`Props through render`} />} />
+          <Redirect from="/old-route" to="/new-route" />
+          <Route exact path="/new-route" component={RedirectPage} />
+          <Route exact path="/dashboard" component={DashboardPage} />
+          <Route exact path="/auth-not-loggedin" render={(props) => <AuthPage {...props} isLoggedIn={false} />} />
+          <Route exact path="/auth-loggedin" render={(props) => <AuthPage {...props} isLoggedIn={true} />} />
           <Route component={NoMatchPage} />
         </Switch>
       </Router>