Блог

Я установил react-router-dom версию 6-beta. Следуя примеру с веб-сайта, я могу использовать новую опцию 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;
 

Я думаю, проблема в том, что вам все равно нужно обернуть 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;
 

Реорганизуйте в соответствии с вашими потребностями.

У вас должен быть <BrowserRouter> (или любой из предоставленных маршрутизаторов) выше в дереве. Причина этого в том, что <BrowserRouter> предоставляет контекст истории, который необходим во время создания маршрутов useRoutes() . Обратите внимание, что более высокий уровень означает, что он не может быть сам по <App> себе, но, по крайней мере, в компоненте, который его отображает.

Вот как может выглядеть ваша точка входа:

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


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

 

Упомяните ниже код в index.js

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

это означает, что ваш 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"),
);

 

Просто хочу сообщить об аналогичной проблеме — на момент написания (версия 6.2.1) кажется, вы действительно сталкиваетесь с этой ошибкой, если вы импортируете из react-router вместо react-router-dom . Дорогостоящая опечатка с моей стороны.

Т.е. Убедитесь, что вы импортируете 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.js

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

 > 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;