0

我正在关注将 ReactRouter 与 React-Spring 一起使用的教程。该教程已过时并被调用以导入和使用 useContext ，如下所示：

  const { location } = useContext(__RouterContext);

它现在切换到：

  const { location } = useLocation();

因为这是新标准。

当我尝试运行 localhost 时，我收到“错误：无效的钩子调用。只能在函数组件的主体内部调用钩子。这可能由于以下原因之一发生：...”

以下是一些堆栈帧；

resolveDispatcher 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 projects/WebDev/modules/hooks.js:29

应用 C:/Users/12892/Documents/misc projects/WebDev/transition_site/src/App.js:13 renderWithHooks

C:/Users/12892/Documents/misc projects/WebDev/transition_site/node_modules/react-dom/cjs/react-dom.development.js:14985

mountIndeterminateComponent C:/Users/12892/Documents/misc projects/WebDev/transition_site/node_modules/react-dom/cjs/react-dom.development.js:17811

下面是 App.js 的代码。我相信这是由于将我的代码切换为在 __RouterContext 上使用 useLocation 时发生的错误。

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;

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

4

1 回答 1

0

我这样解决了这个问题：

index.js

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

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

应用程序.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;
于 2021-11-30T16:31:59.880 回答