React.js项目中react-bootstrap导航栏搭配react-router使用失效咨询

路由失效和Navbar是否拆分为独立组件无关，问题是组件层级放置错误。

所有用到react-router-dom提供的Link、useNavigate等路由能力的组件，必须包裹在Router组件内部才能获取路由上下文。你当前把NavbarComp放在了Router标签外部，内部的Link组件无法正常工作，才会触发功能异常。

• 仅需调整App.js中的组件层级，将NavbarComp移动到Router内部即可，无需把Navbar代码合并到App.js中。

修正后的App.js代码如下：

import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import {BrowserRouter as Router,Routes,Route} from 'react-router-dom';

import NavbarComp from './components/Navbar/NavbarComp';
import About from './components/Pages/About';
import Contact from './components/Pages/Contact';
import ErrorPage from './components/Pages/ErrorPage';
import Work from './components/Pages/Work';

function App() {
  return (
    <div className="App">
      <Router>
        <NavbarComp/>
        <Routes>
          <Route path="/" element={ <Work /> } />
          <Route path="/about" element={ <About /> } />
          <Route path="/contact" element={ <Contact /> } />
          <Route path="*" element={ <ErrorPage /> } />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

原有Navbar组件代码无需做任何修改，调整层级后即可正常运行。

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