javascript React Router Wrapped in a BottomNavigation未加载新组件

n53p2ov0 于 2023-11-15 发布在 Java

关注(0)|答案(1)|浏览(105)

我不能为我的生活弄清楚如何从BottomNavigation组件加载DMO页面.转到"/dom"完美工作.点击按钮根本不工作.初始"/"加载伟大.想法？建议？

import * as React from 'react';
import Box from '@mui/material/Box';
import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import AccountTreeIcon from '@mui/icons-material/AccountTree';
import DatasetLinkedIcon from '@mui/icons-material/DatasetLinked';
import LogoutIcon from '@mui/icons-material/Logout';
import './navigation.css'
import {createBrowserRouter, Link, RouterProvider} from 'react-router-dom';
import PmoTable from "../PmoTable/PmoTable";
import DMO from "../DMO/DMO";

export default function Navigation() {
  const [value, setValue] = React.useState(0);
  const router = createBrowserRouter([
    {
      path: "/",
      element: <PmoTable />,
    },
    {
      path: "dmo",
      element: <DMO />,
    }
  ]);

  return (
    <Box className="navBar">
      <RouterProvider router={router} />
      <BottomNavigation
        showLabels
        value={value}
        onChange={(event, newValue) => {
          setValue(newValue);
        }}
      >
        <BottomNavigationAction label="PMO" icon={<AccountTreeIcon />} >
          <Link to='/'></Link>
        </BottomNavigationAction>
        <BottomNavigationAction label="DMO" icon={<DatasetLinkedIcon />} >
          <Link to='/dmo'></Link>
        </BottomNavigationAction>
        <BottomNavigationAction label="Logout" icon={<LogoutIcon />} >
          <Link to='/logout'></Link>
        </BottomNavigationAction>
      </BottomNavigation>
    </Box>
  );
}

字符串

JavaScript

来源：https://stackoverflow.com/questions/77484553/react-router-wrapped-in-a-bottomnavigation-not-loading-the-new-component

1条答案

按热度按时间

b1zrtrql1#

BottomNavigation，或者更具体地说，它呈现的Link组件，需要在BrowserRouter提供的路由上下文中呈现。将BottomNavigation移动到布局路由组件中，以便它可以在路由器中呈现。
Link组件也是空的，这意味着它们必须是可点击/可交互的区域。重写代码以将BottomNavigationAction * 呈现为 * Link组件并传递链接 prop 。
范例：

import {
  createBrowserRouter,
  Link,
  RouterProvider,
  Outlet,
} from 'react-router-dom';

export default function Navigation() {
  const [value, setValue] = React.useState(0);

  const router = createBrowserRouter([
    {
      element: (
        <>
          <Outlet />
          <BottomNavigation
            showLabels
            value={value}
            onChange={(event, newValue) => {
              setValue(newValue);
            }}
          >
            <BottomNavigationAction
              component={Link}
              label="PMO"
              icon={<AccountTreeIcon />}
              to='/'
            />
            <BottomNavigationAction
              component={Link}
              label="DMO"
              icon={<DatasetLinkedIcon />}
              to='/dmo'
            />
            <BottomNavigationAction
              component={Link}
              label="Logout"
              icon={<LogoutIcon />}
              to="/logout"
            />
          </BottomNavigation>
        </>
      ),
      children: [
        {
          path: "/",
          element: <PmoTable />,
        },
        {
          path: "dmo",
          element: <DMO />,
        }
      ],
    },
  ]);

  return (
    <Box className="navBar">
      <RouterProvider router={router} />
    </Box>
  );
}

字符串

赞(0）回复(0）举报 2023-11-15

我来回答

javascript React Router Wrapped in a BottomNavigation未加载新组件

1条答案

相关问题

热门标签

最新问答