Router

package.json

@@ -9,6 +9,7 @@
     "axios": "^0.21.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "styled-components": "^5.3.1",
     "web-vitals": "^1.1.2"

src/App.js

@@ -1,5 +1,6 @@
 import logo from './logo.svg';
 import './App.css';
+import { goToPokedex } from './Routes/Routes';
 
 function App() {
   return (
@@ -15,6 +16,7 @@ function App() {
           target="_blank"
           rel="noopener noreferrer"
         >
+
           Learn React
         </a>
       </header>

src/Routes/Router.js

@@ -0,0 +1,20 @@
+import {BrowserRouter as Router,Switch,Route} from 'react-router-dom'
+import React from 'react'
+
+export const Router = () =>{
+    return(
+        <Router>
+            <Switch>
+                <Route exact path='/home' >
+                </Route>
+
+                <Route exact path='/pokedex' >
+                </Route>
+
+                <Route exact path='/details' >
+                </Route>
+
+            </Switch>
+        </Router>
+    )
+}

src/Routes/Routes.js

@@ -0,0 +1,13 @@
+import history from 'react-router-dom'
+
+export const goToHome = (history) => {
+    history.push('/')
+}
+
+export const goToPokedex = (history) => {
+    history.push('/pokedex')
+}
+
+export const goToDetails = (history) => {
+     history.push('/details')
+}