Example (react-router-dom)

This example offers a quick and prettified way of creating a simple router for page routing of a browser type website using the **"react-router-dom"**. The most important files are the **index.tsx** & **App.tsx**.

### 1. Start a React-App with typescript

```
npx create-react-app [app name] --template typescript

```

### 2. Edit index.tsx

```
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
 <BrowserRouter>
 <App />
 </BrowserRouter>
);

```

### 3. Edit App.tsx

```
import React from "react";
import { Link, Route, Routes } from "react-router-dom";
import "./App.css";
import Home from "./pages/Home";
import About from "./pages/About";
import Messages from "./pages/Messages";

const Navigation = () => (
 <nav>
 <Link to="/">Home</Link>
 <Link to="/messages">Messages</Link>
 <Link to="/about">About</Link>
 </nav>
);

function App() {
 return (
 <>
 <Navigation />

 <Routes>
 <Route path="/" element={<Home />} />
 <Route path="/messages" element={<Messages />} />
 <Route path="/about" element={<About />} />
 </Routes>
 </>
 );
}

export default App;

```

### 4. Create pages to link

pages are in extra directory **"pages"** within **"src"** (expecting Index.tsx & App.tsx to be in **src**).

#### Home

```
import React from "react";
import logo from "../logo.svg";

const Home = () => (
 <div className="App">
 <div className="App-header">
 <img src={logo} className="App-logo" alt="logo" />
 <h1>React Routing</h1>
 </div>
 </div>
);

export default Home;

```

#### Messages

```
import React from 'react';

const Messages = () => (
 <div>
 <h2>Messages</h2>
 Messages
 </div>
);

export default Messages;

```

#### About

```
import React from "react";

function About() {
 return (
 <div>
 <h2>About me, us or them!</h2>
 Read more about us at :
 <a href="https://www.robinwieruch.de/react-router-private-routes/">Tutorial used as inspiration</a>
 </div>
 );
}

export default About;

```

Styling can be done individually.

#### package.json

```
{
 "name": "react-playground",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
 "@testing-library/jest-dom": "^5.16.5",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "@types/jest": "^27.5.2",
 "@types/node": "^16.11.62",
 "@types/react": "^18.0.21",
 "@types/react-dom": "^18.0.6",
 "history": "^5.3.0",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-router-dom": "^6.4.1",
 "react-scripts": "5.0.1",
 "typescript": "^4.8.4",
 "web-vitals": "^2.1.4"
 },
 "scripts": {
 "start": "react-scripts start",
 "dev": "react-scripts start",
 "build": "react-scripts build",
 "test": "react-scripts test",
 "eject": "react-scripts eject"
 },
 "eslintConfig": {
 "extends": [
 "react-app",
 "react-app/jest"
 ]
 },
 "browserslist": {
 "production": [
 ">0.2%",
 "not dead",
 "not op\_mini all"
 ],
 "development": [
 "last 1 chrome version",
 "last 1 firefox version",
 "last 1 safari version"
 ]
 },
 "devDependencies": {
 "@types/reach\_\_router": "^1.3.10"
 }
}

```

### Prettified Versions

#### App.tsx

```
import React from "react";
import { Link, Route, Routes } from "react-router-dom";
import "./App.css";
import Home from "./pages/Home";
import About from "./pages/About";
import Messages from "./pages/Messages";
import { useState } from "react";

const Navigation = () => {
 const [activePage, setActivePage] = useState("Home");

 return (
 <nav className="navigation">
 <Link
 className={
 activePage === "Home" ? "navigation-Link-Active" : "navigation-Link"
 }
 onClick={() => setActivePage("Home")}
 to="/"
 >
 Home
 </Link>
 <Link
 className={
 activePage === "Messages"
 ? "navigation-Link-Active"
 : "navigation-Link"
 }
 onClick={() => setActivePage("Messages")}
 to="/messages"
 >
 Messages
 </Link>
 <Link
 className={
 activePage === "About" ? "navigation-Link-Active" : "navigation-Link"
 }
 onClick={() => setActivePage("About")}
 to="/about"
 >
 About
 </Link>
 </nav>
 );
};

function App() {
 return (
 <>
 <Navigation />

 <Routes>
 <Route path="/" element={<Home />} />
 <Route path="/messages" element={<Messages />} />
 <Route path="/about" element={<About />} />
 </Routes>

 <div className="footer">
 <div className="footer\_\_header">
 <h2>Here could be footer</h2>
 </div>
 <div className="footer\_\_grid-box">
 <div>
 <p>Lorem Ipsum</p>
 <p>Lorem Ipsum</p>
 <p>Lorem Ipsum</p>
 </div>
 <div>
 <p>Lorem Ipsum</p>
 <p>Lorem Ipsum</p>
 <p>Lorem Ipsum</p>
 </div>
 <div>
 <p>Lorem Ipsum</p>
 <p>Lorem Ipsum</p>
 <p>Lorem Ipsum</p>
 </div>
 <div>
 <p>Lorem Ipsum</p>
 <p>Lorem Ipsum</p>
 <p>Lorem Ipsum</p>
 </div>
 </div>
 </div>
 </>
 );
}

export default App;

```

#### About.tsx

```
import React from "react";

function About() {
 return (
 <div className="about\_\_outer-box">
 <h2>About me, us or them!</h2>
 <span className="line">
 <p className="line-p">Read more about us at: </p>
 <p className="line-p">
 <a href="https://www.robinwieruch.de/react-router-private-routes/">
 Tutorial used as inspiration
 </a>
 </p>
 </span>
 <div>
 <img
 src="https://blog.logrocket.com/wp-content/uploads/2020/05/react-cool-portal.jpeg"
 alt=""
 />
 </div>
 </div>
 );
}

export default About;

```

#### Messages.tsx

```
import React from "react";

const Messages = () => (
 <div className="messages">
 <h1 className="messages-title">Messages Page</h1>
 <div className="messages\_\_table-box">
 <table>
 <thead>
 <tr>
 <th>header 1</th>
 <th>header 2</th>
 <th>header 3</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>
 <span>messages 1</span>
 </td>
 <td>
 <span>messages 2</span>
 </td>
 <td>
 <span>messages 3</span>
 </td>
 </tr>
 <tr>
 <td>
 <span>messages 4</span>
 </td>
 <td>
 <span>messages 5</span>
 </td>
 <td>
 <span>messages 6</span>
 </td>
 </tr>
 <tr>
 <td>
 <span>messages 7</span>
 </td>
 <td>
 <span>messages 8</span>
 </td>
 <td>
 <span>messages 9</span>
 </td>
 </tr>
 <tr>
 <td>
 <span>messages 10</span>
 </td>
 <td>
 <span>messages 11</span>
 </td>
 <td>
 <span>messages 12</span>
 </td>
 </tr>
 <tr>
 <td>
 <span>messages 13</span>
 </td>
 <td>
 <span>messages 14</span>
 </td>
 <td>
 <span>messages 15</span>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
);

export default Messages;

```

#### App.css

```
.navigation {
 display: flex;
 background-color: #282c34;
}
.navigation-Link {
 padding: 1em;
 color: #61dafb;
 font-size: 24px;
}
.navigation-Link-Active {
 padding: 1em;
 color: #b5e211;
 font-size: 24px;
}

.navigation-Link:active {
 padding: 1em;
 color: #cf1709;
 font-size: 24px;
}

.about\_\_outer-box {
 background-color: #565f70;
 padding: 64px 0 64px 0;
 display: flex;
 flex-direction: column;
 align-items: center;
 color: white;
}
.footer {
 background-color: #282c34;
 padding: 64px;
 display: flex;
 flex-direction: column;
 color: white;
}

.footer\_\_header {
 color: #61dafb;
 display: flex;
 justify-content: center;
}

.footer\_\_grid-box {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
}

.footer\_\_grid-box\_\_col {
 display: flex;
 flex-direction: column;
}

.line {
 display: flex;
 flex-direction: row;
}

.line-p {
 padding: 8px;
}

.messages {
 padding: 64px;
 display: flex;
 flex-direction: column;
 align-items: center;
 background-color: #787c84;
}

.messages-title {
 margin-top: 0;
}

table {
 border: 1px solid #61dafb;
 border-collapse: collapse;
}

td {
 text-align: start;
 padding: 8px;
 min-width: 200px;
 font-size: 18px;
 border: 1px solid #61dafb;
 border-collapse: collapse;
 background-color: #565f70;
 color: white;
}

th {
 color: #61dafb;
 background-color: #282c34;
 text-align: start;
 padding: 8px;
 min-width: 200px;
 font-size: 24px;
 border: 1px solid #61dafb;
 border-collapse: collapse;
}

.table-border-sides {
 border-right: 1px solid #61dafb;
 border-left: 1px solid #61dafb;
}

thead {
 border-bottom: 3px solid #61dafb;
}

.messages\_\_table-box {
}

.messages\_\_table {
}

.App-logo {
 height: 40vmin;
 pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
 .App-logo {
 animation: App-logo-spin infinite 20s linear;
 }
}

.App-header {
 background-color: #282c34;
 min-height: 65vh;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 font-size: calc(10px + 2vmin);
 color: white;
}

@keyframes App-logo-spin {
 from {
 transform: rotate(0deg);
 }
 to {
 transform: rotate(360deg);
 }
}

```