Recently I configured my main website to use React. I wanted to have my logo and web navigation at the top and retain my footer at the bottom of the page for all of the website pages. This left the content area to be dynamic based upon what navigation button was pressed. Content is illustrated in the figure below.

Most tutorials I had seen with React Router required the developer to define a NavBar component I was not too keen on using. Why? My reasoning boils down to preference. The NavBar or "<nav>" component is provided by React. I find it to be an OK solution, but React Router is still required to make the actual nav selection displayable.

NavBar is not needed for the simplicity of what I was trying to do. My website being a little more lightweight will not hurt anything either by not importing it to my app.

Again, the problem to solve was to make meat of the page content dynamic (see the circled area above). I chose to import only React Router into my App.js to solve this issue.

import {
  Link,
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";

The intent with only using React Router is to use as less code as possible and have great maintainability. Using inline HTML achieved this no problem.

Since I did not use Nav component, the links that React Router recognizes must be declared within the React Router's definition. Since the Nav component is at the top of the page, the react router had to be declared at the page container level.

        <Router>
          <div className='header'> 
            <div className='logoBox'>
              <img src={logo} id='logo' alt='logo'/>
            </div>
            <table className='table' align='center' cellPadding='5'>
              <tbody>
                <tr>
                  <td><Link to="/"><img id='btnHome' className='navButton' src={NavHome} alt=''/></Link></td>
                  <td><Link to="/projects"><img id='btnProjects' className='navButton' src={NavProjects}/></Link></td>
                  <td><Link to="/about"><img id='btnAbout' className='navButton' src={NavAbout}/></Link></td>
                  <td><Link to="/payment"><img id='btnPayments' className='navButton' src={NavPayments}/></Link></td>
                </tr>
              </tbody>
            </table>
          </div>
          <div className="content">
            <Routes>
                <Route exact path="/" element={<Page_Home />} />
                <Route path="/projects" element={<Page_Projects />} />
                <Route path="/about" element={<Page_About />} />
                <Route path="/payment" element={<Page_Payments />} />
                <Route path="/blackjackdemo" element={<Blackjack_Demo/>}/>
            </Routes>
          </div>
          <div className='footer'>
            <p>Copyright &copy; CW Creations All Rights Reserved 2021-2025</p>
          </div>
        </Router>

Each Link defines the route to a page content of a user's navigation choice. The table element with the class name "table" defines the Links that the Router can use later in the script, as seen in the "content" div.

Since Router was defined at an upper HTML level, it also must encapsulate the footer.