React Router V6 - 오류: useRoutes()는 컴포넌트의 컨텍스트에서만 사용할 수 있습니다.

React Router V6 - 오류: useRoutes()는 컴포넌트의 컨텍스트에서만 사용할 수 있습니다.

설치 완료react-router-domV6 베타웹 사이트의 예에 따라 새로운 옵션을 사용할 수 있습니다.useRoutes설정 페이지 루트를 가지고 있으며, 그것들을 에 반환한다.App.js파일.

저장 후 다음 오류가 나타납니다.

오류: useRoutes()는 컴포넌트의 컨텍스트에서만 사용할 수 있습니다.

혹시 제가 뭘 놓치고 있는 건 아닐까요?페이지 작성은 이미 완료되어 있습니다.src/pages폴더입니다.

내 코드:

import { BrowserRouter, Link, Outlet, useRoutes } from 'react-router-dom';

// Pages
import Home from './pages/Home';
import About from './pages/About';
import Services from './pages/Services';
import Gallery from './pages/Gallery';
import Prices from './pages/Prices';
import Contact from './pages/Contact';

const App = () => {
    const routes = useRoutes([
        { path: '/', element: <Home /> },
        { path: 'o-nama', element: <About /> },
        { path: 'usluge', element: <Services /> },
        { path: 'galerija', element: <Gallery /> },
        { path: 'cjenovnik', element: <Prices /> },
        { path: 'kontakt', element: <Contact /> }
    ]);

    return routes;
};

export default App;

가지고 계셔야 합니다.<BrowserRouter>(또는 제공된 라우터 중 하나)가 트리 상위에 있습니다.그 이유는 그 이유가<BrowserRouter>에 를 사용하여 루트 작성 시 필요한 이력 컨텍스트를 나타냅니다.useRoutes(). 위가 높으면 위쪽에 있을 수 없다는 것을 유의하십시오.<App>적어도 그것을 렌더링하는 컴포넌트에서는요.

도입 포인트는 다음과 같습니다.

import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';


ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root'),
);

문제는 아직 포장해야 한다는 것 같아요.routes(Routes/useRoutes)의 내부Router요소.

예를 들어 다음과 같습니다.

import React from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  useRoutes,
} from "react-router-dom";

const Component1 = () => {
  return <h1>Component 1</h1>;
};

const Component2 = () => {
  return <h1>Component 2</h1>;
};

const App = () => {
  let routes = useRoutes([
    { path: "/", element: <Component1 /> },
    { path: "component2", element: <Component2 /> },
    // ...
  ]);
  return routes;
};

const AppWrapper = () => {
  return (
    <Router>
      <App />
    </Router>
  );
};

export default AppWrapper;

니즈에 맞게 리팩터링.

Your index js 또는 App JS를 BrowserRouter로 랩하는 것을 의미합니다.

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <BrowserRouter>  // Like This here I am using
                <App />
           </BrowserRouter>
       </Provider>
    </React.StrictMode>,
    document.getElementById("root"),
);

index.js에서 다음 코드를 언급합니다.

import { BrowserRouter as Router } from "react-router-dom";

같은 문제를 보고하고 싶습니다.쓰기(v6.2.1)에서는 실제로 이 에러가 발생하고 있는 것 같습니다.react-router대신react-router-dom비싼 오타가 있었네요.

즉, Import를 하고 있는지 확인합니다.Routes그리고.Route부터react-router-dom그리고 아니다react-router

// This is deceptively valid as the components exist, but is not the intended usage
import { Routes, Route } from 'react-router';

// This works and is the intended usage
import { Routes, Route } from 'react-router-dom';

코드: index.js

import {BrowserRouter as Router}  from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
  <Router>
    <App />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

app.module

function App() {
  return (
  <>
    <Routes>
    <Route path ="/" element={<Main />} />
    <Route path ="gigs" element={<Gigs />} />
    </Routes>
</>
  );
}

App.js가 아닌 index.js에 루트를 추가합니다.App.js가 index.js에서 호출됩니다.index.js에서 외부 페이지는 다음과 같이 호출됩니다.

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Navbar />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

> Following codes works since react-router-dom syntax changed because of React 18.

  import logo from './logo.svg';
    import './App.css';
    import Header from './components/Header';
    import Login from './components/Login';
    import {
      BrowserRouter as Router,
      Routes,
      Route,
      useRoutes,
    } from 'react-router-dom';
    import Signup from './components/Signup';
    
    function AppRoutes() {
      const routes = useRoutes(
        [
          {path:'/',element:<Login/>},
          {path:'/signup',element:<Signup/>}
        ]
      )
      return routes;
    }
    function App(){
      return (
        <Router>
          <Header/>
          <AppRoutes />
        </Router>
      )
    }
    
    export default App;

해라

const Routes = () => useRoutes([]) 

App.js에서 이렇게 랩을 합니다.

<BrowserRouter> 
    <Routes />
</BrowserRouter>

그것은 나에게 효과가 있었다.

이 에러는, 2개의 다른 버전의 react-router-dom이 번들 되어 있었기 때문에 발생했습니다.

npm/yarn 워크스페이스를 사용하는 경우 설치된 버전이 1개뿐인지 확인합니다.react-router-domtop-level node_module 폴더에 저장

언급URL : https://stackoverflow.com/questions/65425884/react-router-v6-error-useroutes-may-be-used-only-in-the-context-of-a-route