我已经安装了react-router-domV6-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 /> }, …4 个月后，我回到了我的 Webpack 4 配置和所有包。软件包更新或弃用的速度总是让我感到惊讶。
我有这个问题，我曾经将@babel/polyfill 与我的其他 JS 和 SASS 源一起直接包含到 Webpack 的条目 => src 中。
这是我当前的 .babelrc 文件：
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry",
"corejs": "core-js@2",
"debug": false
}
]
]
}
和我的 Webpack 的入口设置：
entry: {
src: [paths.entry.polyfill(), paths.entry.js(), paths.entry.sass()]
},
以及我设置所有导出的配置：
entry: {
sass: () => path.resolve(module.exports.sass(), './style.scss'),
js: () => path.resolve(module.exports.js(), './index.js'),
polyfill: () => '@babel/polyfill'
},
我的 package.json 和 Babel 文件：
"@babel/core": "^7.4.4",
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"autoprefixer": "^9.4.4",
"babel-eslint": "10.0.1",
"babel-loader": "^8.0.5", …试图在谷歌上寻找答案。安装babel-preset-env并使用后"useBuiltIns" : "usage"，我是否仍然需要默认以下规则："corejs" : "3"
.babelrc：
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns" : "usage",
"corejs" : "3"
}
]
]
}
这是我的 browserslistrc：
[development]
last 2 versions
last 1 Edge versions
last 2 Chrome versions
last 2 Firefox versions
last 2 Safari versions
last 2 Opera versions
not IE 11
not op_mini all
not dead
current node
[production]
last 2 versions
not IE 11
not op_mini all
not dead
maintained node versions
这个话题总是让我感到困惑，我不需要支持 IE11，因为只支持所有浏览器的最后两个版本。 …
我的页面上有一个scrollTo 函数，当您单击特定按钮时，您会滚动到具有唯一ID 的部分。
问题是我对网站上的图像使用延迟加载，因此，这将导致 ScrollTo 由于延迟加载的图像而在页面中途停止。
毕竟，图像已加载，我再次单击按钮，它工作得很好。
我的延迟加载代码：
(() => {
const runLazy = () => {
let images = [...document.querySelectorAll('[data-lazy]')];
const settings = {
rootMargin: '0px',
threshold: 0.02
};
let observer = new IntersectionObserver((imageEntites) => {
imageEntites.forEach((image) => {
if (image.isIntersecting) {
observer.unobserve(image.target);
image.target.src = image.target.dataset.lazy;
image.target.onload = () =>
image.target.classList.add('loaded');
}
});
}, settings);
images.forEach((image) => observer.observe(image));
};
runLazy();
})();
我的滚动到代码：
(() => {
document.querySelectorAll('a[href^="#"]').forEach((elem) => {
elem.addEventListener('click', (e) => {
e.preventDefault();
let block = document.querySelector(elem.getAttribute('href')),
offset = …在加载实际对象之前，使用Axios和useEffect提取数据将导致null。
不幸的是，在实际对象不为空之前，我无法使用对象分解。
我被迫使用一个钩子来检查一个对象是否为空。
例如，我想创建多个函数并将我的代码拆分为单独的函数，以提高可读性。
这是我的HTTP请求Hook：
import { useState, useEffect } from 'react';
import axios from 'axios';
export const useHttp = (url, dependencies) => {
const [isLoading, setIsLoading] = useState(false);
const [fetchedData, setFetchedData] = useState(null);
useEffect(() => {
setIsLoading(true);
axios
.get(url)
.then(response => {
setIsLoading(false);
setFetchedData(response.data);
})
.catch(error => {
console.error('Oops!', error);
setIsLoading(false);
});
}, dependencies);
return [isLoading, fetchedData];
};
其次是我的页面组件：
import React from 'react';
import { PAGE_ABOUT, API_URL } from 'constants/import';
import Header from './sections/Header';
import Main from './sections/Main';
import …我的组件文件夹中有一个名为 Header 的组件。主要 JS 文件和样式文件。由于某种原因我得到"import error: 'Header' is not exported from 'components/Header'"
标头.js：
const Header = () => {
return (
<div>
<h2>The Header</h2>
</div>
);
};
export default Header;
组件/标题/index.js：
export * from "./Header";
应用程序.js：
import { Header } from "components/Header";
function App() {
return (
<div className="App">
<Header />
</div>
);
}
export default App;
为什么这不起作用？