React17+React Router Dom6.3中<Link>导致应用空白的问题

1. 确保<Link>处于<Router>上下文内 #

<Link>是react-router-dom的路由组件，必须被<Router>（或别名BrowserRouter）包裹才能正常工作。原代码中<NavTabs>在<Router>外部，会直接触发组件报错，导致页面空白。

修复后的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() {
  // 添加状态管理当前页面，用于导航高亮
  const [currentPage, setCurrentPage] = useState('About');

  const handlePageChange = (page) => setCurrentPage(page);

  return (
    <Router> {/* 将Router提升到最外层，包裹所有内容 */}
      <div className='portfolio-container d-flex flex-column min-vh-100'>
        <NavTabs currentPage={currentPage} handlePageChange={handlePageChange} /> {/* 传递必要props */}
        <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>
  )
};

export default PortfolioContainer;

2. 统一路由路径 #

NavTabs中部分<Link>的to属性带有/portfolio-react-router/前缀，但Routes定义的路径无此前缀，导致跳转后无法匹配路由，页面空白。

二选一修复：

• 若应用部署在子路径/portfolio-react-router/下，给<Router>添加basename属性：

  <Router basename="/portfolio-react-router">
    {/* 其余内容不变 */}
  </Router>
  

  保持NavTabs里的to路径不变（如to='/portfolio-react-router/portfolio'）。

• 若无子路径需求，直接修改NavTabs的to路径为无前缀格式：
  修复后的NavTabs.js关键片段：

  {/* PORTFOLIO */}
  <li className='nav-item'>
    <Link
      to='/portfolio'
      onClick={() => handlePageChange('Portfolio')}
      className={currentPage === 'Portfolio'
        ? 'nav-link active'
        : 'nav-link'
      }
    >
      Portfolio
    </Link>
  </li>
  
  {/* CONTACT */}
  <li className='nav-item'>
    <Link
      to='/contact'
      onClick={() => handlePageChange('Contact')}
      className={currentPage === 'Contact'
        ? 'nav-link active'
        : 'nav-link'
      }
    >
      Contact
    </Link>
  </li>
  
  {/* RESUME */}
  <li className='nav-item'>
    <Link
      to='/resume'
      onClick={() => handlePageChange('Resume')}
      className={currentPage === 'Resume'
        ? 'nav-link active'
        : 'nav-link'
      }
    >
      Resume
    </Link>
  </li>
  
  {/* CYCLING */}
  <li className='nav-item'>
    <Link
      to='/cycling'
      onClick={() => handlePageChange('Cycling')}
      className={currentPage === 'Cycling'
        ? 'nav-link active'
        : 'nav-link'
      }
    >
      Cycling
    </Link>
  </li>
  

3. 传递NavTabs所需props #

原代码中<NavTabs />未传递currentPage和handlePageChange，导致导航高亮等逻辑失效，可能引发渲染异常。修复后的PortfolioContainer.js已添加状态管理并传递了这两个props。

内容的提问来源于stack exchange，提问作者Colleen M