Skip to content
Permalink
Browse files

feat: redirect route example

  • Loading branch information...
Param-Harrison committed Jul 25, 2019
1 parent f4388f1 commit e354527b3c43917112e36101fbd4f5f66924252e
Showing with 38 additions and 4 deletions.
  1. +38 −4 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>

0 comments on commit e354527

Please sign in to comment.
You can’t perform that action at this time.