score:57

Accepted answer

yes, daniel is correct, but to expand upon his answer, your primary app component would need to have a navbar component within it. that way, when you render the primary app (any page under the '/' path), it would also display the navbar. i am guessing that you wouldn't want your login page to display the navbar, so that shouldn't be a nested component, and should instead be by itself. so your routes would end up looking something like this:

<router>
  <route path="/" component={app}>
    <route path="page1" component={page1} />
    <route path="page2" component={page2} />
  </route>
  <route path="/login" component={login} />
</router>

and the other components would look something like this:

var navbar = react.createclass({
  render() {
    return (
      <div>
        <ul>
          <a onclick={() => history.push('page1') }>page 1</a>
          <a onclick={() => history.push('page2') }>page 2</a>
        </ul>
      </div>
    )
  }
});

var app = react.createclass({
  render() {
    return (
      <div>
        <navbar />
        <div>other content</div>
        {this.props.children}
      </div>
    )
  }
});

score:1

for @chris 's answer to work in a functional component. here is the answer react-router, router-dom versions v5.2.0

  import react from 'react';
  import { link, switch, route } from 'react-router-dom';
  import header from './header';
  import footer from '.footer';
  import page1 from './page1';
  import page2 from './page2';
  import page3 from './page3';
  import loading from './loading'; // a page to show spinner 

const dashboard = react.lazy(() => import('../pages/dashboard'));
// if you have an admin dashboard to load lazily

  const navroute = ({exact, path, component: component}) => (
    <route exact={exact} path={path} render={(props) => (
      <div>
        <header/>
        <component {...props}/>
        <footer/>
      </div>
    )}/>
  )

  function app() {   
      return (
        <div>
          <suspense fallback={<loading />}>
              <switch>
                <navroute exact path="/" component={landing}  />
                <route exact path="/admin/dashboard" component={dashboard}/>
                <route exact path="/" component={login} />
                <navroute exact path="/path1" component={page1} />
                <navroute exact path="/path2" component={page2} />
                <navroute component={page404} />
              </switch>
          </suspense>
        </div>
      );
  }

export default app;

score:8

react router version 6+ 2021 routes with/without navbars

import { outlet, route, routes } from "react-router-dom";
// your components here 

const app = () => {
  
  return (
    <>
      <routes>
        {/* routes that needs a navbar will need to go as children of this route component */}
        <route path="/" element={<layoutswithnavbar />}>
          <route path="/" element={<div>home screen</div>} />
          <route path="/welcome" element={<welcome />} />
          <route path="/something" element={<somethinggg />} />
          <route path="/somethingprotected" element={<yourcustomprotectedroute component={someone}/>} />
          <route path="/something/:id" element={<protectedroute id component={somethingbyid}/>} />
        </route>

        {/* routes without a navbar you can add them here as normal routes */}
        <route
          path="/idontneednavbar"
          element={<protectedroute component={providerregistrationinfo} />}
        />
      </routes>
    </>
  );

  function layoutswithnavbar() {
    return (
      <>
        {/* your navbar component */}
        <navbar />
  
        {/* this outlet is the place in which react-router will render your components that you need with the navbar */}
        <outlet /> 
        
        {/* you can add a footer to get fancy in here :) */}
      </>
    );
  }

how it works

the layoutswithnavbar component will render the navbar with any component you need with a navbar. you can find an example in the official react-router v6 docs here: https://reactrouter.com/docs/en/v6/getting-started/overview#nested-routes

learn more about the outlet component: https://reactrouter.com/docs/en/v6/getting-started/concepts#outlets

score:74

note the accepted is perfectly fine - but wanted to add a version4 example because they are different enough.

nav.js

  import react from 'react';
  import { link } from 'react-router';

  export default class nav extends react.component {
    render() {    
      return (
        <nav classname="nav">
          <div classname="nav__container">
            <link to="/" classname="nav__brand">
              <img src="logo.svg" classname="nav__logo" />
            </link>

            <div classname="nav__right">
              <ul classname="nav__item-wrapper">
                <li classname="nav__item">
                  <link classname="nav__link" to="/path1">link 1</link>
                </li>
                <li classname="nav__item">
                  <link classname="nav__link" to="/path2">link 2</link>
                </li>
                <li classname="nav__item">
                  <link classname="nav__link" to="/path3">link 3</link>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      );
    }
  }

app.js

  import react from 'react';
  import { link, switch, route } from 'react-router';
  import nav from './nav';
  import page1 from './page1';
  import page2 from './page2';
  import page3 from './page3';

  export default class app extends react.component {
    render() {    
      return (
        <div classname="app">
          <router>
            <div>
              <nav />
              <switch>
                <route exactly component={landing} pattern="/" />
                <route exactly component={page1} pattern="/path1" />
                <route exactly component={page2} pattern="/path2" />
                <route exactly component={page3} pattern="/path3" />
                <route component={page404} />
              </switch>
            </div>
          </router>
        </div>
      );
    }
  }

alternatively, if you want a more dynamic nav, you can look at the excellent v4 docs: https://reacttraining.com/react-router/web/example/sidebar

edit

a few people have asked about a page without the nav, such as a login page. i typically approach it with a wrapper route component

  import react from 'react';
  import { link, switch, route } from 'react-router';
  import nav from './nav';
  import page1 from './page1';
  import page2 from './page2';
  import page3 from './page3';

  const navroute = ({exact, path, component: component}) => (
    <route exact={exact} path={path} render={(props) => (
      <div>
        <header/>
        <component {...props}/>
      </div>
    )}/>
  )

  export default class app extends react.component {
    render() {    
      return (
        <div classname="app">
          <router>
              <switch>
                <navroute exactly component={landing} pattern="/" />
                <route exactly component={login} pattern="/login" />
                <navroute exactly component={page1} pattern="/path1" />
                <navroute exactly component={page2} pattern="/path2" />
                <navroute component={page404} />
              </switch>
          </router>
        </div>
      );
    }
  }

Related Query

More Query from same tag