Merge pull request #5030 from backstage/timbonicus/fix-techdocs-example

Update TechDocs getting-started code snippet

docs/features/techdocs/getting-started.md

@@ -35,20 +35,19 @@ Add the following to `packages/app/src/plugins.ts`:
 export { plugin as TechDocs } from '@backstage/plugin-techdocs';
 ```
 
-Now let us embed the TechDocs router in our main Backstage frontend router. In
-`packages/app/src/App.tsx`, import the TechDocs router and add the following to
-`AppRoutes`:
+Now we can add a route for the TechDocs page. In `packages/app/src/App.tsx`,
+import TechDocsPage and add the following to `FlatRoutes`:
 
 ```tsx
-import { Router as DocsRouter } from '@backstage/plugin-techdocs';
+import { TechDocsPage } from '@backstage/plugin-techdocs';
 
 // ...
 
 const AppRoutes = () => {
-  <Routes>
+  <FlatRoutes>
     // ... other plugin routes
-    <Route path="/docs/*" element={<DocsRouter />} />
-  </Routes>;
+    <Route path="/docs" element={<TechdocsPage />} />
+  </FlatRoutes>;
 };
 ```
 
@@ -72,12 +71,12 @@ add the following
 ```typescript
 import {
   createRouter,
-  Preparers,
   Generators,
+  Preparers,
   Publisher,
 } from '@backstage/plugin-techdocs-backend';
-import { PluginEnvironment } from '../types';
 import Docker from 'dockerode';
+import { PluginEnvironment } from '../types';
 
 export default async function createPlugin({
   logger,
@@ -126,8 +125,8 @@ it.
 See [Concepts](concepts.md) and [TechDocs Architecture](architecture.md) to
 learn more about how preparers, generators and publishers work.
 
-Final step is to import the techdocs backend plugin in Backstage app backend.
-Add the following to your `packages/backend/src/index.ts`:
+The final step is to import the techdocs backend plugin in Backstage app
+backend. Add the following to your `packages/backend/src/index.ts`:
 
 ```typescript
 import techdocs from './plugins/techdocs';