错误：useHref()只能在&lt；路由器&>组件的上下文中使用。当我将url直接放入本地主机：3000/Experience时，它就可以工作了 [英] 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

问题描述

我有一个在每条路线中呈现的导航栏，当路线在单击时更改。

./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();

当我从导航栏的Experience标签中删除<Link>时，没有出现错误。 这里也有类似的问题：Error: useHref() may be used only in the context of a <Router> component 但没有帮助。

我正在使用Reaction路由器V6

推荐答案

问题

您正在将导航栏呈现在路由上下文之外。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>

这篇关于错误：useHref()只能在&lt；路由器&>组件的上下文中使用。当我将url直接放入本地主机：3000/Experience时，它就可以工作了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！