From eaadef210ed84fcf17db70306455e70500be02d6 Mon Sep 17 00:00:00 2001
From: Roman Podoliaka <roman.podoliaka@gmail.com>
Date: Sun, 6 Jun 2021 20:30:45 +0100
Subject: [PATCH] Fix routing

https://github.com/xsnippet/xsnippet-web/pull/159 accidentally broke
routing: apparently, React renders *all* matched routes by default,
and so our new snippet id regexp does not play nicely with other
routes like /about or /recent, which are now matched as well, because
both "about" and "recent" are valid snippet ids.

The solution is to use the https://reactrouter.com/web/api/Switch
component which renders the *first* matched Route as opposed to all
of them.
---
 src/components/App.jsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/App.jsx b/src/components/App.jsx
index a5c4d9b..315840a 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -1,5 +1,5 @@
 import React, { Fragment, useEffect, useState } from 'react'
-import { BrowserRouter as Router, Route } from 'react-router-dom'
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
 
 import Header from './Header'
 import Sidebar from './Sidebar'
@@ -47,11 +47,15 @@ const App = () => {
         <div className="content">
           <Sidebar />
           <main className="main">
-            <Route exact path="/" component={NewSnippet} />
-            <Route exact path="/recent" component={RecentSnippets} />
-            <Route exact path="/:id([a-zA-Z0-9]+)" component={Snippet} />
-            <Route exact path="/about" component={About} />
-            <Route exact path="/sign-in" component={SignIn} />
+            <Switch>
+              <Route exact path="/" component={NewSnippet} />
+              <Route exact path="/about" component={About} />
+              <Route exact path="/recent" component={RecentSnippets} />
+              <Route exact path="/sign-in" component={SignIn} />
+              // Switch renders the first matched route, so we need to keep this
+              // one last as the regexp below matches the paths of other pages
+              <Route exact path="/:id([a-zA-Z0-9]+)" component={Snippet} />
+            </Switch>
           </main>
         </div>
       </Fragment>