Блог

Главная - Вопросы по программированию - Измените код, чтобы использовать UseLocation вместо __RouterContext. Теперь у меня есть Недопустимый вызов крючка

Измените код, чтобы использовать UseLocation вместо __RouterContext. Теперь у меня есть Недопустимый вызов крючка

#javascript #node.js #reactjs #react-router #react-spring

Вопрос:

Я следую учебнику по использованию ReactRouter с React-Spring. Учебник был датирован и вызван для импорта и использования useContext следующим образом:

   const { location } = useContext(__RouterContext);

Теперь он переключен на:

   const { location } = useLocation();

Так как это новый стандарт.

Когда я пытаюсь запустить localhost, я получаю сообщение «Ошибка: Недопустимый вызов соединения. Крючки могут вызываться только внутри тела функционального компонента. Это может произойти по одной из следующих причин:…»

Ниже приведены некоторые кадры стека;

Решающий диспетчер C:/Users/12892/Documents/node_modules/react/cjs/react.development.js:1476

useContext C:/Users/12892/Documents/node_modules/react/cjs/react.development.js:1484

Использование C:/Users/12892/Documents/misc проекты/WebDev/модули/крючки.js:29

Приложение C:/Users/12892/Documents/misc проекты/WebDev/transition_site/src/App.js:13 рендерингов с крючками

C:/Users/12892/Documents/misc проекты/WebDev/transition_site/node_modules/react-dom/cjs/react-dom.разработка.js:14985

монтированиедетерминаткомпонент C:/Users/12892/Documents/misc проекты/WebDev/transition_site/node_modules/react-dom/cjs/react-dom.разработка.js:17811

Ниже приведен код для App.js. Я полагаю, что это происходит из-за ошибки при переключении моего кода на использование useLocation над __RouterContext.

 import React from 'react';
import { Switch, Route, useLocation } from 'react-router-dom';
import { useTransition, animated } from '@react-spring/web';

import PageOne from './components/PageOne';
import PageTwo from './components/PageTwo';
import PageThree from './components/PageOne';
import PageFour from './components/PageFour';
import Nav from './components/Navbar';

const App = () => {

  const { location } = useLocation();
  const transitions = useTransition(location, location => location.pathname, {
    from: {opacity: 0, transform: "translate(100%, 0)"},
    enter: {opacity: 1, transform: "translate(0%, 0)"},
    leave: {opacity: 0, transform: "translate(-50%, 0)"}
  });

  return (
    <>
      <Nav />
      <main className='container-fluid'>
        {transitions.map(({ item, props, key }) => (
          <animated.div key={key} style={props}>
            <Switch>
              <Route exact path="/" component={PageOne} />
              <Route exact path="/two" component={PageTwo} />
              <Route exact path="/three" component={PageThree} />
              <Route exact path="/four" component={PageFour} />
            </Switch>
          </animated.div>
        ))}
      </main>
    </>
  );
}

export default App;

Index.js

 import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';


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

reportWebVitals();

Комментарии:

1. Является ли поставщик маршрутизатора браузера оболочкой вашего App дерева ReactDOM?

2. Да, это так. Я обновлю свой пост.

3. Это let location = useLocation так, но это все еще не объясняет ошибку.

4. Я установил браузер, который устранил проблему. Теперь я получаю «местоположение не определено».

5. См. Предыдущий комментарий.

Ответ №1:

Я решил эту проблему следующим образом:

index.js

 import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

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

App.js

 import React, { useContext } from "react";
import { BrowserRouter, Switch, Route, useLocation } from "react-router-dom";
import { useTransition, animated } from "react-spring";
import { page1, page2, page3, page4 } from "./components";

const App = () => {
  

  return (
    <>
    
    <BrowserRouter>
    <Navbah/>
      <Home />
    </BrowserRouter>
    </>
  );
};

const Home = () => {
  let location  = useLocation();
  const transitions = useTransition(location, (location) => location.pathname, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    delay: 200,
  });

  return (
    <>
    
      {transitions.map(({ item, props, key }) => (
        <animated.div key={key} style={props}>
          <Switch location={item}>
            <Route exact path="/page1" component={Page1} />
            <Route exact path="/page2" component={Page2} />
            <Route exact path="/page3" component={Page3} />
            <Route exact path="/page4" component={Page4} />
          </Switch>
        </animated.div>
      ))}
    </>
  );
};

export default App;
Метки: ,