Navegação de rotas

src/pages/Main/index.js

@@ -3,6 +3,7 @@
 import React, { Component } from 'react';
 import { FaGithubAlt, FaPlus, FaSpinner } from 'react-icons/fa';
 
+import { Link } from 'react-router-dom';
 import { Container, Form, SubmitButton, List } from './styles';
 
 import api from '../../services/api';
@@ -85,7 +86,13 @@ export default class Main extends Component {
                     {repositories.map(repository => (
                         <li key={repository.name}>
                             <span>{repository.name}</span>
-                            <a href={() => {}}>Detalhe</a>
+                            <Link
+                                to={`/repository/${encodeURIComponent(
+                                    repository.name
+                                )}`}
+                            >
+                                Detalhe
+                            </Link>
                         </li>
                     ))}
                 </List>

src/pages/Repository/index.js

@@ -2,6 +2,6 @@ import React from 'react';
 
 // import { Container } from './styles';
 
-export default function Repository() {
-    return <h1>Repository</h1>;
+export default function Repository({ match }) {
+    return <h1>{decodeURIComponent(match.params.repository)}</h1>;
 }

src/routes.js

@@ -1,18 +1,18 @@
 import React from 'react';
-import {BrowserRouter, Switch, Route} from 'react-router-dom';
+import { BrowserRouter, Switch, Route } from 'react-router-dom';
 
 import Main from './pages/Main';
-import Repository from './pages/Repository'
+import Repository from './pages/Repository';
 
 // import { Container } from './styles';
 
 export default function Routes() {
-  return (
-    <BrowserRouter>
-        <Switch>
-            <Route path='/'component={Main} exact/>
-            <Route path='/repository'component={Repository}/>
-        </Switch>
-    </BrowserRouter>
-  );
+    return (
+        <BrowserRouter>
+            <Switch>
+                <Route path="/" component={Main} exact />
+                <Route path="/repository/:repository" component={Repository} />
+            </Switch>
+        </BrowserRouter>
+    );
 }