【问题标题】：Error: useHref() may be used only in the context of a <Router> component. It works when I directly put the url as localhost:3000/experiences错误：useHref() 只能在 <Router> 组件的上下文中使用。当我直接将 url 作为 localhost:3000/experiences 时，它可以工作
【发布时间】：2022-01-10 04:21:54
【问题描述】：

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

./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> 时，错误不会出现。这里发布了一个类似的问题：Error: useHref() may be used only in the context of a <Router> component 但没有帮助。

我正在使用反应路由器 v6

【问题讨论】：

在您正在构建路由的组件上，只需将所有内容放在标签内。不仅是路线，还有一切。

标签： reactjs react-router react-router-dom

【解决方案1】：

链接在内部导航栏和导航栏在路由器外部 => 链接在路由器外部 => 路由器不会管理链接

解决方案

将导航栏移动到路由器部分

<Router>
  <Navbar /> // <===========
  <Routes>
    <Route />
    <Route />
  </Routes>
</Router>

【讨论】：

【解决方案2】：

问题

您正在在路由上下文之外呈现导航栏。 Router 不知道链接试图链接它正在管理的 t 的路由。直接导航到"/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>

【讨论】：

它对我有用，谢谢:)