javascript React指向其他页面的MUI链接不会路由

23c0lvtd  于 2022-10-30  发布在  Java
关注(0)|答案(1)|浏览(115)

**我如何在下面的代码中获得FAQ以路由到/pages/FAQ?**我无法让我的React MUI链接实际路由到我的其他页面。我已经尝试了许多示例。我错过了什么?React示例似乎对MUI无效。我尝试的一些操作使页面无法完全呈现。它可以构建,但它是空白的。此代码可以工作,除了链接的重要部分实际执行某些操作。

import { Divider, ListItemButton, ListItemIcon, Link } from 
"@mui/material";
import { ActionIconsContainerDesktop, ActionIconsContainerMobile, MyList } from "../../styles/appbar";
import PersonIcon from "@mui/icons-material/Person";
import {
     ListItemText,
  } from "@mui/material"; 
import SearchIcon from "@mui/icons-material/Search";
import { Colors } from "../../styles/theme";
import React from 'react';

export default function Actions({ matches }) {

    const Component = matches ? ActionIconsContainerMobile : ActionIconsContainerDesktop;

    return (
        <Component>
            <MyList type="row">

                <ListItemButton
                    sx={{
                        justifyContent: "center",
                    }}
                >
                    <ListItemIcon
                        sx={{
                            display: "flex",
                            justifyContent: "center",
                            color: matches && Colors.secondary,
                        }}
                    >

                    </ListItemIcon>
                </ListItemButton>
      <Link>FAQ</Link>

                 <ListItemButton
                    sx={{
                        justifyContent: "center",
                    }}
                >
                    <ListItemIcon
                        sx={{
                            display: "flex",
                            justifyContent: "center",
                            color: matches && Colors.secondary,
                        }}
                    >
                        <PersonIcon sx={{ color: "#72a092" }} />
                    </ListItemIcon>
                </ListItemButton>
              </MyList>
        </Component>
    );
}
s4n0splo

s4n0splo1#

您不能在to prop in link组件中给予文件目录地址,您所要做的就是为blog组件创建一个单独的路径
@Ryan Cogswell已经回答了类似的问题。访问Can you use Material-UI Link with react-router-dom Link?。了解更多详细信息
在应用程序或路径组件中

<BrowserRouter>
    <Routes>
      <Route path="/blogs" element={<Blogs/>}/>
    </Routes>
</BrowserRouter>

在链接组件中

<Link component={RouterLink} to="../../pages/blogs">
   Link to Home
</Link>

有关详细信息,请阅读文档https://mui.com/material-ui/guides/routing/#main-content

相关问题