我无法将导航栏放在 React 上的 main.jsx 上

Question

我目前正在学习 React，我的

main.jsx

上有这段代码：

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Navbar></Navbar> <--- The issue
    <RouterProvider router={router} />
  </React.StrictMode>,
)

如果我将

Navbar

组件放在这里，它会在控制台上给我这个错误：

未捕获类型错误：React2.useContext(...) 为 null

我的

Navbar

组件

import React from 'react'
import { Link } from 'react-router-dom'

const Navbar = () => {
    return (
        <div>
            <Link to='/'>Home</Link>
            <br />
            <Link to='/dashboard'>Dashboard</Link>
            <br />
            <Link to='/contact'>Contact</Link>
        </div>
    )
}

export default Navbar

如果我把它放在那里，我可以在其他组件上使用

Navbar

，但不能在

main.jsx

上使用。我想做的基本上是将

Navbar

组件添加到所有页面。这就是我将其添加到那里的原因。

任何帮助将不胜感激。

Answer 1

您遇到的问题可能是由于组件渲染的顺序和 RouterProvider 中的上下文使用造成的。当导航栏组件在 RouterProvider 之外呈现时，它可能无法访问路由器提供的必要上下文。

要解决此问题，您可以构建应用程序以确保导航栏可以访问路由器上下文。一种常见的方法是将导航栏包含在 RouterProvider 管理的组件树中。

创建一个名为 Layout.jsx 的新文件：

import { Outlet } from 'react-router-dom'
import Navbar from './Navbar'

const Layout = () => {
    return (
        <div>
            <Navbar />
            <Outlet />
        </div>
    )
}

export default Layout

确保您的路由器配置使用布局组件：

import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Layout from './Layout'
import Home from './Home'
import Dashboard from './Dashboard'
import Contact from './Contact'

const router = createBrowserRouter([
    {
        path: '/',
        element: <Layout />,
        children: [
            { path: '/', element: <Home /> },
            { path: '/dashboard', element: <Dashboard /> },
            { path: '/contact', element: <Contact /> },
        ],
    },
])

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <RouterProvider router={router} />
    </React.StrictMode>,
)