docs(frontend-system): apply more routes suggestions

Co-authored-by: Patrik Oldsberg <poldsberg@gmail.com>
Signed-off-by: Camila Belo <camilaibs@gmail.com>

docs/frontend-system/architecture/07-routes.md

@@ -102,7 +102,7 @@ It may be unclear why we need to pass the route to the plugin once it has alread
 
 You can link to the routes from other pages in the same plugin or you can also link between different plugins pages. In this section we will cover the first scenario, if you are interested in link to a page of a different plugin, please go to the [external routes](#external-router-references) section below.
 
-Alright, let's presume that we have a plugin that renders tow different pages, and these pages links to each other.
+Alright, let's presume that we have a plugin that renders two different pages, and these pages link to each other.
 
 First lets create the routes references:
 
@@ -110,7 +110,7 @@ First lets create the routes references:
 // plugins/catalog/src/routes.ts
 import { createRouteRef } from '@backstage/frontend-plugin-api';
 
-const rootRouteRef = createRouteRef();
+export const rootRouteRef = createRouteRef();
 
 type DetailsRouteParams = {
   namespace: string;
@@ -136,7 +136,7 @@ const rootPage = createPageExtension({
   defaultPath: '/'
   routeRef: rootRouteRef,
   loader: async () => {
-    const href = useRouteRef(catalogEntityDetailsRouteRef)({
+    const href = useRouteRef(detailsRouteRef)({
       kind: 'Component',
       namespace: 'Default',
       name: 'foo'
@@ -165,8 +165,8 @@ const detailsPage = createPageExtension({
 export default const createPlugin({
   id: 'catalog',
   routes: {
-    list: catalogEntityListRouteRef,
-    details: catalogEntityDetailsRouteRef,
+    root: rootRouteRef
+    details: detailsRouteRef,
   },
   extensions: [rootPage, detailsPage]
 });
@@ -179,9 +179,9 @@ During runtime, we used a hook `useRouteRef` to get the path to the details page
 
 ## External Router References
 
-Now let's assume that we want to link from the Catalog entity list page to the Scaffolder create component page. We don't want to reference the Scaffolder plugin directly, since that would create an unnecessary dependency. It would also provided little flexibility in allowing the app to tie plugins together, with the links instead being dictated by the plugins themselves. To solve this, we use ExternalRouteRefs. Much like regular route references, they can be passed to `useRouteRef` to create concrete URLs, but they can not be used in page extensions and instead have to be associated with a target route using route bindings in the app.
+Now let's assume that we want to link from the Catalog entity list page to the Scaffolder create component page. We don't want to reference the Scaffolder plugin directly, since that would create an unnecessary dependency. It would also provided little flexibility in allowing the app to tie plugins together, with the links instead being dictated by the plugins themselves. To solve this, we use an `ExternalRouteRef`. Much like regular route references, they can be passed to `useRouteRef` to create concrete URLs, but they can not be used in page extensions and instead have to be associated with a target route using route bindings in the app.
 
-We create a new ExternalRouteRef inside the Scaffolder plugin, using a neutral name that describes its role in the plugin rather than a specific plugin page that it might be linking to, allowing the app to decide the final target. If the Catalog entity list page for example wants to link the Scaffolder create component page in the header, it might declare an ExternalRouteRef similar to this:
+We create a new `RouteRef` inside the Scaffolder plugin, using a neutral name that describes its role in the plugin rather than a specific plugin page that it might be linking to, allowing the app to decide the final target. If the Catalog entity list page for example wants to link the Scaffolder create component page in the header, it might declare an `ExternalRouteRef` similar to this:
 
 ```tsx
 // plugins/catalog/src/routes.ts
@@ -217,7 +217,7 @@ const rootPage = createPageExtension({
 export default const createPlugin({
   id: 'catalog',
   routes: {
-    entityList: entityListRouteRef
+    root: rootRouteRef,
   }
   externalRoutes: {
     createComponent: createComponentRouteRef,