反应路由器导航栏标题链接到其他组件答案

【问题标题】：React router navbar header link to other component反应路由器导航栏标题链接到其他组件
【发布时间】：2022-11-14 04:22:50
【问题描述】：

索引.tsx

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
    errorElement: <ErrorPage />,
  },
  {
    path: "about",
    element: <About />,
  },
  {
    path: "speaker",
    element: <Speaker />,
  },
]);

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

头文件.tsx

在标头组件中具有指向扬声器组件的链接

错误：未捕获错误：useHref() 只能在 <Router> 组件的上下文中使用。

error: react-dom.development.js:18687 <Link> 组件出现上述错误：

import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import { Link } from 'react-router-dom';

export default function Header() {
    return (
        <Box sx={{ flexGrow: 1 }}>
            <AppBar position="static">
                <Toolbar>
                    <IconButton
                        size="large"
                        edge="start"
                        color="inherit"
                        aria-label="menu"
                        sx={{ mr: 2 }}
                    >
                        <MenuIcon />
                    </IconButton>
                    <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
                        News
                    </Typography>
                    <Button color="inherit">Login</Button>
                    <Link to="/speaker">Speaker</Link>
                </Toolbar>
            </AppBar>
        </Box>
    );
}

【问题讨论】：

标头必须在路由器提供商内部
如何在提供者内部标头？

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

Header 组件应该被渲染内由路由器提供的路由上下文。为嵌套路由创建一个渲染Header 组件和Outlet 组件的布局路由。

例子：

const router = createBrowserRouter([
  {
    element: (
      <>
        <Header />
        <Outlet />
      </>
    ),
    children: [
      {
        path: "/",
        element: <Home />,
        errorElement: <ErrorPage />,
      },
      {
        path: "about",
        element: <About />,
      },
      {
        path: "speaker",
        element: <Speaker />,
      },
    ],
  },
]);

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

【讨论】：