错误：useHref() 只能在 <Router> 组件的上下文中使用。当我直接将 url 作为 localhost:3000/experiences 时，它可以工作

Question

我有一个导航栏，它在每条路线中呈现，而路线在点击时发生变化。

./components/navbar.jsx

 import React, { Component } from 'react';
import '../App.css';
import { Link } from 'react-router-dom';

class Navbar extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {
        return (
            <div id = 'navbar'>

                <div className='name-head'>
                    My Name
                </div>


                <div id = 'nav-links-container'>

                    <Link to='/experiences'>
                        <div className = 'nav-links'>
                            Experiences
                        </div>
                    </Link>

                    <div className = 'nav-links'>
                        Projects
                    </div>

                    <div className = 'nav-links'>
                        Skills
                    </div>

                    <div className = 'nav-links'>
                        Resume
                    </div>

                </div>

            </div>
        );
    }
}

export default Navbar;

./components/experiences.jsx

 import React, { Component } from 'react';

class Experiences extends Component {

    render() {
        return (
            <div>
                <h1>hi</h1>
            </div>
        );
    }
}

export default Experiences;

index.js

 import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import Navbar from './components/Navbar';
import Home from './components/Home';
import Experiences from './components/experience';

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

ReactDOM.render(

  <React.StrictMode>

    <Navbar />

    <Router>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/experiences" element={<Experiences />} />
      </Routes>

    </Router>

  </React.StrictMode>,

  document.getElementById('root')
);

reportWebVitals();

当我从导航栏中的体验标签中删除 <Link> 时，错误不会出现。这里发布了一个类似的问题： 错误：useHref() 只能在 组件的上下文中使用， 但没有帮助。

我正在使用反应路由器 v6

原文由 tendinitis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题

您正在路由上下文 之外 呈现导航栏。 Router 不知道链接试图链接到它正在管理的路由。直接导航到 "/experiences" 时路由起作用的原因是因为 Router 在应用程序安装时知道 URL。

 <Navbar /> // <-- outside router!!

<Router>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/experiences" element={<Experiences />} />
  </Routes>
</Router>

解决方案

将它移到路由上下文 _中_，以便 Router 知道并可以正确管理路由。

 <Router>
  <Navbar />
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/experiences" element={<Experiences />} />
  </Routes>
</Router>

react-router-dom@6.4 数据API

如果您正在使用新的数据路由器，如果您尝试在 RouterProvider 组件 之外 呈现标题/导航栏，则可能会遇到此问题。为此，您可以创建一个布局路由，它是传递给 createBrowserRouter （ _和其他变体_）的路由配置的一部分。

例子：

 const AppLayout = () => (
  <>
    <Navbar />
    <Outlet />
  </>
);

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route element={<AppLayout />}>
      <Route path="/" element={<Home />} />
      <Route path="/experiences" element={<Experiences />} />
    </Route>
  )
);

…

 <RouterProvider router={router} />

原文由 Drew Reese 发布，翻译遵循 CC BY-SA 4.0 许可协议