Create home and 404 route

This commit is contained in:
Pierre HUBERT 2021-05-13 08:34:06 +02:00
parent 1e6de3454f
commit 71fc9dce44
3 changed files with 40 additions and 16 deletions

View File

@ -0,0 +1,3 @@
export function HomeRoute() {
return <p style={{ color: "white" }}>Welcome to Comunic Console!</p>;
}

View File

@ -25,6 +25,9 @@ import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { AccountHelper } from "../../helpers/AccountHelper"; import { AccountHelper } from "../../helpers/AccountHelper";
import CloseSharpIcon from "@material-ui/icons/CloseSharp"; import CloseSharpIcon from "@material-ui/icons/CloseSharp";
import { NotFoundRoute } from "./NotFoundRoute";
import { HomeRoute } from "./HomeRoute";
import { Home, Person } from "@material-ui/icons";
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
@ -83,21 +86,15 @@ function Menu() {
<List component="nav" aria-label="main mailbox folders"> <List component="nav" aria-label="main mailbox folders">
<ListItem button> <ListItem button>
<ListItemIcon> <ListItemIcon>
<InboxIcon /> <Home />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Inbox" /> <ListItemText primary="Home" />
</ListItem> </ListItem>
<ListItem button> <ListItem button>
<ListItemIcon> <ListItemIcon>
<DraftsIcon /> <Person />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Drafts" /> <ListItemText primary="My account" />
</ListItem>
</List>
<Divider />
<List component="nav" aria-label="secondary mailbox folders">
<ListItem button>
<ListItemText primary="Trash" />
</ListItem> </ListItem>
</List> </List>
</div> </div>
@ -153,14 +150,14 @@ export function MainRoute() {
<Menu></Menu> <Menu></Menu>
</Paper> </Paper>
<div> <div style={{ flex: "1", padding: "50px" }}>
<Switch> <Switch>
<Route exact path="/">
<HomeRoute></HomeRoute>
</Route>
<Route path="*"> <Route path="*">
<p>yes</p> <NotFoundRoute></NotFoundRoute>
<p>yes</p>
<p>yes</p>
<p>yes</p>
<p>yes</p>Not found
</Route> </Route>
</Switch> </Switch>
</div> </div>

View File

@ -0,0 +1,24 @@
/**
* 404 Error page
*
* @author Pierre Hubert
*/
import { Typography } from "@material-ui/core";
export function NotFoundRoute() {
return (
<div
style={{
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<Typography variant="h3" color="primary">
404 Not found
</Typography>
</div>
);
}