오류: useHref()는 컴포넌트의 컨텍스트에서만 사용할 수 있습니다. URL을 localhost:3000/experience로 직접 입력하면 동작합니다.

오류: useHref()는 컴포넌트의 컨텍스트에서만 사용할 수 있습니다. URL을 localhost:3000/experience로 직접 입력하면 동작합니다.

클릭 시 루트가 변경되는 동안 모든 루트에 렌더링되는 네비게이션바가 있습니다.

./컴포넌트/navbar.snvx

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;

./컴포넌트 / 컴포넌트 / 컴포넌트 / 컴포넌트

import React, { Component } from 'react';


class Experiences extends Component {
    
    render() { 
        return (
            <div>
                <h1>hi</h1>
            </div>
        );
    }
}
 
export default Experiences;

index.displaces를 표시합니다.

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>네비게이션 바의 experience 태그에서 찾을 수 있습니다.에러:useHref()는 <Router> 컴포넌트의 컨텍스트에서만 사용할 수 있지만 도움이 되지 않습니다.

리액트 라우터 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>

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} />

React Route v6에서는 <Browser Router>를 사용하여 전체 앱에 루트 컨텍스트를 제공하면서 이 문제를 해결할 수 있습니다.

다음은 index.js의 완전한 예입니다.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { App }  from './components/App/App.jsx';


ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>  //that is the key
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

만약 당신이 여전히 이것에 문제가 있다면, 그것은 바로react-router-dom는 유닛 테스트를 시도할 때 React 컨텍스트에 의존합니다.이렇게 하면<Link />또는<Route />쓸모없는
설명서를 읽어 보십시오.

사용하는 대신

render(<Example />)

둘 중 하나를 가지고 있거나 안에 있는 사람들은

render(<MemoryRouter>
    <Example />
</MemoryRouter>)

이것으로 당신의 문제가 해결되기를 바랍니다.

react-router-dom: 6.x 및 react: 18.x에서는 다음 방법으로 라우터를 사용하여 문제를 해결해야 합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { App }  from './App.js';

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <Router>  // Router
      <App /> // Application
    </Router>
  </React.StrictMode>
); 

링크는 Navbar 내부이고 Navbar는 라우터 => 링크는 라우터 => 라우터가 링크를 관리하지 않음

솔루션

[ Navbar ]를 [Router 섹션으로 이동합니다.예:

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

BrowserRouter를 사용하여 네비게이션바 랩

import { BrowserRouter, Routes, Route } from "react-router-dom";
<BrowserRouter>
    <AppNavBar />
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/wall" element={<WallPost />} />
    </Routes>
  </BrowserRouter>

프로젝트에 설치React Router v6.

npm install react-router-dom@6 

그 후 사용BrowserRouter당신의 안에서index.js파일, 다음과 같이 입력합니다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
<React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

Respect Router v6 이 일반적인 문제는 단순히 "index.js" 코드를 대체할 수 있습니다.해결책을 찾을 수 있을 것이다.

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const container = document.getElementById('root');
const root = createRoot(container);
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

입니다만, 에는, 「lib」, 「lib」가 포함되어 있었습니다.react-router-dom: 6.0.2 it's （ that that that that that that that that that that that that installed installed installed installed installed 。v6.3.0

Import 후 v6를 사용하기 때문에 링크는 BrowserRouter 컴포넌트 내에 있어야 합니다.

<BrowserRouter>
    <Link to='page'>
</BrowserRouter>

는, 「」가 원인으로 합니다.Link가 ""에 .react-router가 Navbar를 사용하고 있습니다.Link의 컴포넌트Navbar는 라우터 컨텍스트에 의해 랩되지 않습니다.

테스트 환경에서도 같은 에러가 발생합니다.「」를 사용하는 .Link 및 에서 이 합니다.왜냐하면 이 컴포넌트는 테스트 환경에서 때 같은 오류가 발생합니다.Link컴포넌트는 라우터 컨텍스트에 액세스해야 합니다.다음 중 하나:

import { render } from "@testing-library/react";

// this will throw same error
test("testing", () => {
  render(<ComponentRendersLink/>); 
});

이 경우 라우터로 랩하는 솔루션

// there are more router options
import { MemoryRouter } from "react-router-dom";

render(
    <MemoryRouter>
      <ComponentRendersLink />
    </MemoryRouter>
  );

언급URL : https://stackoverflow.com/questions/70220413/error-usehref-may-be-used-only-in-the-context-of-a-router-component-it-wor