相关疑难解决方法(0)

我已经安装了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 /> }, …

我有一个导航栏，当路线单击时发生变化时，它会在每条路线中呈现。

./components/navbar.jsx

import React, { Component } from 'react';
import '../App.css';
import { Link } from 'react-router-dom';



class Navbar extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    render() {
        return (
            <div id = 'navbar'>

                <div className='name-head'>
                    My Name
                </div>
            
            
                <div id = 'nav-links-container'>
                    
                    <Link to='/experiences'>
                        <div className = 'nav-links'>
                            Experiences
                        </div>
                    </Link>

                    <div className = 'nav-links'>
                        Projects
                    </div>

                    <div className = 'nav-links'>
                        Skills
                    </div>

                    <div className = 'nav-links'>
                        Resume
                    </div>

                </div>
                
            </div>
        );
    }
}

export default …

我在使用useState钩子时遇到此错误.我有它的基本形式,查看反应文档作为参考,但我仍然得到这个错误.我已准备好面对掌心时刻......

export function Header() {
  const [count, setCount] = useState(0)
  return <span>header</span>
}