Merge pull request #486 from sharetribe/routes-exact-by-default

routeConfiguration uses exact routes by default

src/Routes.js

@@ -91,11 +91,15 @@ const Routes = props => {
       staticContext,
       dispatch,
     };
+
+    // By default, our routes are exact.
+    // https://reacttraining.com/react-router/web/api/Route/exact-bool
+    const isExact = route.exact != null ? route.exact : true;
     return (
       <Route
         key={route.name}
         path={route.path}
-        exact={route.exact}
+        exact={isExact}
         render={matchProps => (
           <RouteComponentRenderer
             {...renderProps}

src/routeConfiguration.js

@@ -36,53 +36,48 @@ const draftSlug = 'draft';
 
 const RedirectToLandingPage = () => <NamedRedirect name="LandingPage" />;
 
+// Our routes are exact by default.
+// See behaviour from Routes.js where Route is created.
 const routeConfiguration = () => {
   return [
-    { path: '/', exact: true, name: 'LandingPage', component: props => <LandingPage {...props} /> },
+    { path: '/', name: 'LandingPage', component: props => <LandingPage {...props} /> },
     {
       path: '/s',
-      exact: true,
       name: 'SearchPage',
       component: props => <SearchPage {...props} />,
       loadData: SearchPage.loadData,
     },
     {
       path: '/s/filters',
-      exact: true,
       name: 'SearchFiltersPage',
       component: props => <SearchPage {...props} tab="filters" />,
       loadData: SearchPage.loadData,
     },
     {
       path: '/s/listings',
-      exact: true,
       name: 'SearchListingsPage',
       component: props => <SearchPage {...props} tab="listings" />,
       loadData: SearchPage.loadData,
     },
     {
       path: '/s/map',
-      exact: true,
       name: 'SearchMapPage',
       component: props => <SearchPage {...props} tab="map" />,
       loadData: SearchPage.loadData,
     },
     {
       path: '/l',
-      exact: true,
       name: 'ListingBasePage',
       component: RedirectToLandingPage,
     },
     {
       path: '/l/:slug/:id',
-      exact: true,
       name: 'ListingPage',
       component: props => <ListingPage {...props} tab="listing" />,
       loadData: ListingPage.loadData,
     },
     {
       path: '/l/:slug/:id/book',
-      exact: true,
       name: 'ListingPage',
       component: props => <ListingPage {...props} tab="book" />,
       loadData: ListingPage.loadData,
@@ -90,7 +85,6 @@ const routeConfiguration = () => {
     {
       path: '/l/:slug/:id/checkout',
       auth: true,
-      exact: true,
       name: 'CheckoutPage',
       component: props => <CheckoutPage {...props} />,
       setInitialValues: CheckoutPage.setInitialValues,
@@ -98,7 +92,6 @@ const routeConfiguration = () => {
     {
       auth: true,
       path: '/l/new',
-      exact: true,
       name: 'NewListingPage',
       component: () => (
         <NamedRedirect
@@ -110,7 +103,6 @@ const routeConfiguration = () => {
     {
       auth: true,
       path: '/l/:slug/:id/:type/:tab',
-      exact: true,
       name: 'EditListingPage',
       component: props => <EditListingPage {...props} />,
       loadData: EditListingPage.loadData,
@@ -120,59 +112,50 @@ const routeConfiguration = () => {
     // conflict and `new` is not a valid listing UUID.
     {
       path: '/l/:id',
-      exact: true,
       name: 'ListingPageCanonical',
       component: props => <ListingPage {...props} tab="listing" />,
       loadData: ListingPage.loadData,
     },
     {
       path: '/u',
-      exact: true,
       name: 'ProfileBasePage',
       component: RedirectToLandingPage,
     },
     {
       path: '/u/:displayName',
-      exact: true,
       name: 'ProfilePage',
       component: props => <ProfilePage {...props} />,
     },
     {
       path: '/profile-settings',
       auth: true,
-      exact: true,
       name: 'ProfileSettingsPage',
       component: props => <ProfileSettingsPage {...props} />,
     },
     {
       path: '/login',
-      exact: true,
       name: 'LoginPage',
       component: props => <AuthenticationPage {...props} tab="login" />,
     },
     {
       path: '/signup',
-      exact: true,
       name: 'SignupPage',
       component: props => <AuthenticationPage {...props} tab="signup" />,
     },
     {
       path: '/recover-password',
-      exact: true,
       name: 'PasswordRecoveryPage',
       component: props => <PasswordRecoveryPage {...props} />,
     },
     {
       path: '/inbox',
       auth: true,
-      exact: true,
       name: 'InboxBasePage',
       component: () => <NamedRedirect name="InboxPage" params={{ tab: 'sales' }} />,
     },
     {
       path: '/inbox/:tab',
       auth: true,
-      exact: true,
       name: 'InboxPage',
       component: props => <InboxPage {...props} />,
       loadData: InboxPage.loadData,
@@ -180,14 +163,12 @@ const routeConfiguration = () => {
     {
       path: '/order/:id',
       auth: true,
-      exact: true,
       name: 'OrderPage',
       component: RedirectToLandingPage,
     },
     {
       path: '/order/:id/details',
       auth: true,
-      exact: true,
       name: 'OrderDetailsPage',
       component: props => <OrderPage {...props} tab="details" />,
       loadData: OrderPage.loadData,
@@ -195,7 +176,6 @@ const routeConfiguration = () => {
     {
       path: '/order/:id/discussion',
       auth: true,
-      exact: true,
       name: 'OrderDiscussionPage',
       component: props => <OrderPage {...props} tab="discussion" />,
       loadData: OrderPage.loadData,
@@ -203,14 +183,12 @@ const routeConfiguration = () => {
     {
       path: '/sale/:id',
       auth: true,
-      exact: true,
       name: 'SalePage',
       component: props => <SalePage {...props} tab="discussion" />,
     },
     {
       path: '/sale/:id/details',
       auth: true,
-      exact: true,
       name: 'SaleDetailsPage',
       component: props => <SalePage {...props} tab="details" />,
       loadData: SalePage.loadData,
@@ -218,7 +196,6 @@ const routeConfiguration = () => {
     {
       path: '/sale/:id/discussion',
       auth: true,
-      exact: true,
       name: 'SaleDiscussionPage',
       component: props => <SalePage {...props} tab="discussion" />,
       loadData: SalePage.loadData,
@@ -226,7 +203,6 @@ const routeConfiguration = () => {
     {
       path: '/listings',
       auth: true,
-      exact: true,
       name: 'ManageListingsPage',
       component: props => <ManageListingsPage {...props} />,
       loadData: ManageListingsPage.loadData,
@@ -234,14 +210,12 @@ const routeConfiguration = () => {
     {
       path: '/account',
       auth: true,
-      exact: true,
       name: 'AccountSettingsPage',
       component: () => <NamedRedirect name="ContactDetailsPage" />,
     },
     {
       path: '/account/contact-details',
       auth: true,
-      exact: true,
       name: 'ContactDetailsPage',
       component: props => <ContactDetailsPage {...props} />,
       loadData: ContactDetailsPage.loadData,
@@ -249,57 +223,48 @@ const routeConfiguration = () => {
     {
       path: '/account/change-password',
       auth: true,
-      exact: true,
       name: 'PasswordChangePage',
       component: props => <PasswordChangePage {...props} />,
     },
     {
       path: '/account/payout-preferences',
       auth: true,
-      exact: true,
       name: 'PayoutPreferencesPage',
       component: props => <PayoutPreferencesPage {...props} />,
     },
     {
       path: '/account/security',
       auth: true,
-      exact: true,
       name: 'SecurityPage',
       component: props => <SecurityPage {...props} />,
     },
     {
       path: '/styleguide',
-      exact: true,
       name: 'Styleguide',
       component: props => <StyleguidePage {...props} />,
     },
     {
       path: '/styleguide/g/:group',
-      exact: true,
       name: 'StyleguideGroup',
       component: props => <StyleguidePage {...props} />,
     },
     {
       path: '/styleguide/c/:component',
-      exact: true,
       name: 'StyleguideComponent',
       component: props => <StyleguidePage {...props} />,
     },
     {
       path: '/styleguide/c/:component/:example',
-      exact: true,
       name: 'StyleguideComponentExample',
       component: props => <StyleguidePage {...props} />,
     },
     {
       path: '/styleguide/c/:component/:example/raw',
-      exact: true,
       name: 'StyleguideComponentExampleRaw',
       component: props => <StyleguidePage raw {...props} />,
     },
     {
       path: '/notfound',
-      exact: true,
       name: 'NotFoundPage',
       component: props => <NotFoundPage {...props} />,
     },
@@ -309,7 +274,6 @@ const routeConfiguration = () => {
     // The API expects that the Starter App implements /reset-password endpoint
     {
       path: '/reset-password',
-      exact: true,
       name: 'PasswordResetPage',
       component: props => <PasswordResetPage {...props} />,
     },
@@ -321,7 +285,6 @@ const routeConfiguration = () => {
       path: '/verify-email',
       auth: true,
       authPage: 'LoginPage',
-      exact: true,
       name: 'EmailVerificationPage',
       component: props => <EmailVerificationPage {...props} />,
     },

src/util/routes.js

@@ -29,12 +29,13 @@ export const pathByRouteName = (nameToFind, routes, params = {}) =>
  * @param {String} pathname - Full URL path from root with possible
  * search params and hash included
  *
- * @return {Array<{ route, params }>} - All matches as { route, params } objects
+ * @return {Array<{ route, params }>} - All matches as { route, params } objects if matches has
+ * exact flag set to false. If not, an array containing just the first matched exact route is returned.
  */
 export const matchPathname = (pathname, routeConfiguration) => {
-  return routeConfiguration.reduce(
+  const matchedRoutes =  routeConfiguration.reduce(
     (matches, route) => {
-      const { path, exact = false } = route;
+      const { path, exact = true } = route;
       const match = matchPath(pathname, { path, exact });
       if (match) {
         matches.push({
@@ -46,6 +47,14 @@ export const matchPathname = (pathname, routeConfiguration) => {
     },
     []
   );
+
+  const matchedExactRoute = matchedRoutes.find(r => {
+    return r.exact === true || r.exact == null;
+  });
+
+  // We return matched 'exact' path route only if such exists
+  // and all matches if no exact flag exists.
+  return matchedExactRoute ? [matchedExactRoute] : matchedRoutes;
 };
 
 /**