Fix direct linking to single components in DevDocs.

plugins/woocommerce-admin/client/devdocs/index.js

@@ -31,7 +31,7 @@ const getExampleData = example => {
 
 export default class extends Component {
 	render() {
-		const { params: { component } } = this.props;
+		const { query: { component } } = this.props;
 		const className = classnames( 'woocommerce_devdocs', {
 			'is-single': component,
 			'is-list': ! component,
@@ -62,7 +62,7 @@ export default class extends Component {
 										componentName
 									) : (
 										<Link
-											href={ `admin.php?page=wc-admin&path=/devdocs/${ filePath }` }
+											href={ `admin.php?page=wc-admin&path=/devdocs&component=${ filePath }` }
 											type="wc-admin"
 										>
 											{ componentName }

plugins/woocommerce-admin/client/layout/controller.js

@@ -32,13 +32,16 @@ export const getPages = () => {
 		pages.push( {
 			container: DevDocs,
 			path: '/devdocs',
-			breadcrumbs: [ 'Documentation' ],
-			wpOpenMenu: 'toplevel_page_woocommerce',
-		} );
-		pages.push( {
-			container: DevDocs,
-			path: '/devdocs/:component',
-			breadcrumbs: ( { match } ) => [ [ '/devdocs', 'Documentation' ], match.params.component ],
+			breadcrumbs: ( { location } ) => {
+				const searchParams = new URLSearchParams( location.search );
+				const component = searchParams.get( 'component' );
+
+				if ( component ) {
+					return [ [ '/devdocs', 'Documentation' ], component ];
+				}
+
+				return [ 'Documentation' ];
+			},
 			wpOpenMenu: 'toplevel_page_woocommerce',
 		} );
 	}