<Link> is causing the entire app to display blank using React 17 and React Router Dom 6.3-CodePudding

I had a single-page React app that functions fine that I am converting to multipage. When I change the <a href> tags (just for checking for display purposes) to <Link> tags, the entire app renders blank.

App.js

import React from 'react';
import PortfolioContainer from './components/PortfolioContainer';

// vdom rendering
function App() {
  return (
    <div>
      <PortfolioContainer />
    </div>
  );
}

export default App;

PortfolioContainer.js

import React, { useState } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

import NavTabs from './NavTabs';
import Header from './Header';
import Footer from './Footer';

import About from './pages/About';
import Portfolio from './pages/Portfolio';
import Contact from './pages/Contact';
import Resume from './pages/Resume';
import Cycling from './pages/Cycling';

function PortfolioContainer() {
  return (
    <div className='portfolio-container d-flex flex-column min-vh-100'>
      <NavTabs />
      <Header />

      <Router>
        <Routes>
          <Route path='/' element={<About />} />
          <Route path='/about' element={<About />} />
          <Route path='/portfolio' element={<Portfolio />} />
          <Route path='/contact' element={<Contact />} />
          <Route path='/resume' element={<Resume />} />
          <Route path='/cycling' element={<Cycling />} />
        </Routes>
      </Router>

      <Footer />
    </div>
  )
};

export default PortfolioContainer;

NavTabs.js

import React from 'react';
import { Link } from 'react-router-dom';

function NavTabs({ currentPage, handlePageChange }) {
  return (
    <nav>
      <ul className='nav nav-tabs bg-color-primary'>
        {/* ABOUT */}
        <li className='nav-item'>
          <Link
            to='/about'
            onClick={() => handlePageChange('About')}
            className={currentPage === 'About'
              ? 'nav-link active'
              : 'nav-link'
            }
          >
            About
          </Link>
        </li>

        {/* PORTFOLIO */}
        <li className='nav-item'>
          <Link
            to='/portfolio-react-router/portfolio'
            onClick={() => handlePageChange('Portfolio')}
            className={currentPage === 'Portfolio'
              ? 'nav-link active'
              : 'nav-link'
            }
          >
            Portfolio
          </Link>
        </li>

        {/* CONTACT */}
        <li className='nav-item'>
          <Link
            to='/portfolio-react-router/contact'
            onClick={() => handlePageChange('Contact')}
            className={currentPage === 'Contact'
              ? 'nav-link active'
              : 'nav-link'
            }
          >
            Contact
          </Link>
        </li>

        {/* RESUME */}
        <li className='nav-item'>
          <Link
            to='/portfolio-react-router/resume'
            onClick={() => handlePageChange('Resume')}
            className={currentPage === 'Resume'
              ? 'nav-link active'
              : 'nav-link'
            }
          >
            Resume
          </Link>
        </li>

        {/* CYCLING */}
        <li className='nav-item'>
          <Link
            to='/portfolio-react-router/cycling'
            onClick={() => handlePageChange('Cycling')}
            className={currentPage === 'Cycling'
              ? 'nav-link active'
              : 'nav-link'
            }
          >
            Cycling
          </Link>
        </li>
      </ul>
    </nav>
  )
};

export default NavTabs;

I've tried downgrading to React 16, upgrading to React Router Dom 5, and just used tags to see the app still works and displays, removing the entire Nav component from rendering to again confirm the app still works w/o it, and moving around <Router> <Route> <div> tags based on other questions/responses. Tried playing with the homepage now in the package.json file because I'm not sure how that needs to be set/if it could be affecting the pathing.

CodePudding user response：

You should render the Link components within a routing context. Move the NavTabs component into the router.

function PortfolioContainer() {
  return (
    <Router>
      <div className='portfolio-container d-flex flex-column min-vh-100'>
        <NavTabs /> // <-- inside Router
        <Header />
        <Routes>
          <Route path='/' element={<About />} />
          <Route path='/about' element={<About />} />
          <Route path='/portfolio' element={<Portfolio />} />
          <Route path='/contact' element={<Contact />} />
          <Route path='/resume' element={<Resume />} />
          <Route path='/cycling' element={<Cycling />} />
        </Routes>
        <Footer />
      </div>
    </Router>
  )
};

Ensure all the links are specifying target paths for routes the app is actually renderinging, e.g. "/", "/about", etc, remove the "/portfolio-react-router" prefix several of the links are using.

You might also consider using the NavLink component which applies an "active" CSS class to the active matching link by default instead of managing this manually with the currentPage state.