修改代码，使用UseLocation而不是__RouterContext.我现在有无效的钩子调用 &

Question

我遵循教程使用ReactRouter与React-Spring。该教程的日期和调用是导入和使用useContext，如下所示:

const { location } = useContext(__RouterContext);

现在改成:

const { location } = useLocation();

因为这是新的标准。

当我尝试运行localhost时，我得到了"错误:无效钩子调用。钩子只能在函数组件的内部调用。这可能是由于以下原因之一:…">

下面是一些栈帧;

resolveDispatcherC:/用户/12892/文档/node_modules/反应/cj/react.development.js: 1476

useContextC:/用户/12892/文档/node_modules/反应/cj/react.development.js: 1484

useLocationC:/用户/12892/文档/misc项目/WebDev/模块/hooks.js: 29日

应用程序C:/用户/12892/文档/misc/WebDev/项目transition_site/src/App.js: 13renderWithHooks

C:/用户/12892/文档/misc项目/WebDev/transition_site/node_modules/react-dom/cj/react-dom.development.js: 14985

mountIndeterminateComponentC:/用户/12892/文档/misc项目/WebDev/transition_site/node_modules/react-dom/cj/react-dom.development.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();

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