Used not-found component for menu layout inner router

src/common/MenuLayout.js

@@ -6,6 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classnames from 'classnames';
 import * as PropTypes from 'prop-types';
 import { serverType } from '../servers/prop-types';
+import NotFound from './NotFound';
 import './MenuLayout.scss';
 
 const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisits) =>
@@ -38,7 +39,8 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi
     }
 
     render() {
-      const { selectedServer } = this.props;
+      const { selectedServer, match } = this.props;
+      const { params: { serverId } } = match;
       const burgerClasses = classnames('menu-layout__burger-icon', {
         'menu-layout__burger-icon--active': this.state.showSideBar,
       });
@@ -88,6 +90,11 @@ const MenuLayout = (TagsList, ShortUrls, AsideMenu, CreateShortUrl, ShortUrlVisi
                     path="/server/:serverId/manage-tags"
                     component={TagsList}
                   />
+                  <Route
+                    component={
+                      () => <NotFound to={`/server/${serverId}/list-short-urls/1`} btnText="List short URLs" />
+                    }
+                  />
                 </Switch>
               </div>
             </div>

src/common/NotFound.js

@@ -1,15 +1,23 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import * as PropTypes from 'prop-types';
 
-const NotFound = () => (
+const propTypes = {
+  to: PropTypes.string,
+  btnText: PropTypes.string,
+};
+
+const NotFound = ({ to = '/', btnText = 'Home' }) => (
   <div className="home">
     <h2>Oops! We could not find requested route.</h2>
     <p>
       Use your browser{'\''}s back button to navigate to the page you have previously come from, or just press this button.
     </p>
     <br />
-    <Link to="/" className="btn btn-outline-primary btn-lg">Home</Link>
+    <Link to={to} className="btn btn-outline-primary btn-lg">{btnText}</Link>
   </div>
 );
 
+NotFound.propTypes = propTypes;
+
 export default NotFound;

test/common/NotFound.test.js

@@ -5,26 +5,44 @@ import NotFound from '../../src/common/NotFound';
 
 describe('<NotFound />', () => {
   let wrapper;
-  let content;
+  const createWrapper = (props = {}) => {
+    wrapper = shallow(<NotFound {...props} />);
+    const content = wrapper.text();
 
-  beforeEach(() => {
-    wrapper = shallow(<NotFound />);
-    content = wrapper.text();
+    return { wrapper, content };
+  };
+
+  afterEach(() => wrapper && wrapper.unmount());
+
+  it('shows expected error title', () => {
+    const { content } = createWrapper();
+
+    expect(content).toContain('Oops! We could not find requested route.');
   });
 
-  afterEach(() => wrapper.unmount());
+  it('shows expected error message', () => {
+    const { content } = createWrapper();
 
-  it('shows expected error title', () => expect(content).toContain('Oops! We could not find requested route.'));
-
-  it('shows expected error message', () =>
     expect(content).toContain(
       'Use your browser\'s back button to navigate to the page you have previously come from, or just press this button.'
-    ));
+    );
+  });
 
   it('shows a link to the home', () => {
+    const { wrapper } = createWrapper();
     const link = wrapper.find(Link);
 
     expect(link.prop('to')).toEqual('/');
     expect(link.prop('className')).toEqual('btn btn-outline-primary btn-lg');
+    expect(link.prop('children')).toEqual('Home');
+  });
+
+  it('shows a link with provided props', () => {
+    const { wrapper } = createWrapper({ to: '/foo/bar', btnText: 'Hello' });
+    const link = wrapper.find(Link);
+
+    expect(link.prop('to')).toEqual('/foo/bar');
+    expect(link.prop('className')).toEqual('btn btn-outline-primary btn-lg');
+    expect(link.prop('children')).toEqual('Hello');
   });
 });