I'm experiencing an issue with the <Link> component from react-router-dom.
The above error occurred in the <Link> component:
at LinkWithRef (http://localhost:3000/react-portfolio/static/js/bundle.js:64573:7)
at button
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at ButtonBase (http://localhost:3000/react-portfolio/static/js/bundle.js:9678:82)
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at Button (http://localhost:3000/react-portfolio/static/js/bundle.js:9381:59)
at div
at div
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at Toolbar (http://localhost:3000/react-portfolio/static/js/bundle.js:20646:82)
at header
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at Paper (http://localhost:3000/react-portfolio/static/js/bundle.js:18055:82)
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at AppBar (http://localhost:3000/react-portfolio/static/js/bundle.js:8771:83)
at div
at http://localhost:3000/react-portfolio/static/js/bundle.js:3642:66
at Box (http://localhost:3000/react-portfolio/static/js/bundle.js:23577:72)
at div
at Navbar (http://localhost:3000/react-portfolio/static/js/bundle.js:629:5)
at div
at PortfolioContainer (http://localhost:3000/react-portfolio/static/js/bundle.js:1060:88)
at div
at App
at Router (http://localhost:3000/react-portfolio/static/js/bundle.js:66149:15)
at BrowserRouter (http://localhost:3000/react-portfolio/static/js/bundle.js:64481:5)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
I'm guessing that this is located in my Navbar file somewhere, which you can see below:
import * as React from 'react';
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 { Link } from 'react-router-dom';
import IconButton from '@mui/material/IconButton';
import Menu from '@mui/material/Menu';
import MenuIcon from '@mui/icons-material/Menu';
import MenuItem from '@mui/material/MenuItem';
import '../styles/root.css';
import useWindowDimension from '../utils/windowDimensions';
import About from '../pages/About';
import Contact from '../pages/Contact';
import Portfolio from '../pages/Portfolio';
import Resume from '../pages/Resume';
export default function Navbar({ handlePageChange }) {
const { height, width } = useWindowDimension();
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const [anchorElNav, setAnchorElNav] = React.useState(null);
const openNav = Boolean(anchorElNav);
const handleOpenNavMenu = (event) => {
setAnchorElNav(event.currentTarget);
};
const handleCloseNavMenu = () => {
setAnchorElNav(null);
}
const handleClose = () => {
setAnchorEl(null);
};
return (
<div>
<Box sx={{ flexGrow: 1, width: "100%" }} >
<AppBar position="static" id="navbar">
<Toolbar>
<Typography
id="nav-logo"
variant="h6"
component="div"
sx={{ flexGrow: 1 }}
fontFamily="reklame-script, sans-serif"
fontWeight="700"
fontStyle="normal"
fontSize="36px"
// onClick={() => handlePageChange('About')}
>
My Portfolio
</Typography>
{width >= 900
?
<div
style={{ display: "flex", direction: "row", flexWrap: "wrap", justifyContent: "space-evenly", alignContent: "center", fontWeight: "bold" }}
>
<Button
color="inherit"
onClose={handleClose}
// onClick={() => handlePageChange('About')}
>
<Link to={<About />}>
About Me
</Link>
</Button>
<Button
color="inherit"
onClose={handleClose}
// onClick={() => handlePageChange('Portfolio')}
>
<Link to={<Portfolio />}>
Portfolio
</Link>
</Button>
<Button
color="inherit"
onClose={handleClose}
// onClick={() => handlePageChange('Contact')}
>
<Link to={<Contact />}>
Contact Me
</Link>
</Button>
<Button
color="inherit"
onClose={handleClose}
// onClick={() => handlePageChange('Contact')}
>
<Link to={<Resume />}>
Resume
</Link>
</Button>
</div>
:
// Mobile Hamburger Menu
<Box id='hamburger-menu' sx={{ flexGrow: 1, display: { xs: "flex", md: "none" }, justifyContent: "right" }}>
<IconButton
id="menu-button"
size="large"
aria-controls={openNav ? 'menu-appbar' : undefined}
aria-haspopup="true"
aria-expanded={openNav ? 'true' : undefined}
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorElNav}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={openNav}
onClose={handleCloseNavMenu}
sx={{
display: { xs: 'block', md: 'none' },
}}
>
<div>
<MenuItem className='mobileMenuItem' onClick={handleCloseNavMenu}>
<Button color="inherit" >
<Link style={{ textDecoration: "none", color: "black" }} to="/" onClose={handleClose}>
About Me
</Link>
</Button>
</MenuItem>
<MenuItem className='mobileMenuItem' onClick={handleCloseNavMenu}>
<Button color="inherit" onClose={handleClose}>
<Link style={{ textDecoration: "none", color: "black" }} to={"/portfolio"}>
Portfolio
</Link>
</Button>
</MenuItem>
<MenuItem className='mobileMenuItem' onClick={handleCloseNavMenu}>
<Button color="inherit" onClose={handleClose}>
<Link style={{ textDecoration: "none", color: "black" }} to="/contact">
Contact Me
</Link>
</Button>
</MenuItem>
<MenuItem className='mobileMenuItem' onClick={handleCloseNavMenu}>
<Button color="inherit" onClose={handleClose}>
<Link style={{ textDecoration: "none", color: "black" }} to="/resume">
Resume
</Link>
</Button>
</MenuItem>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
onClick={handleClick}
onClose={handleClose}
>
</Menu>
</div>
</Menu>
</Box>
}
</Toolbar>
</AppBar>
</Box>
</div>
);
}
If it's not there, perhaps it's in my PortfolioContainer file? This can be seen below.
import React, { useState } from "react";
import About from "../pages/About";
import Portfolio from "../pages/Portfolio";
import Contact from "../pages/Contact";
import Resume from "../pages/Resume";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
export default function PortfolioContainer() {
const [currentPage, setCurrentPage] = useState('');
const renderPage = () => {
if (currentPage === '/') {
return <About />
}
if (currentPage === '/resume') {
return <Resume />;
}
if (currentPage === '/portfolio') {
return <Portfolio />;
}
if (currentPage === '/contact') {
return <Contact />;
}
// return <About />;
};
const handlePageChange = (page) => setCurrentPage(page);
return (
<div id="portfolioContainer">
<Navbar currentPage={currentPage} handlePageChange={handlePageChange} />
{renderPage()}
<Footer />
</div>
);
};
Thank you in advance for any and all help!
CodePudding user response：
I assumed you are useing [email protected] (latest version). "to" prop from component expect a string but you provide the component. That's why you get cyclic object error. I took your code an defined a router in index.js file like this
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from "./App";
import Resume from "./Resume";
const router = createBrowserRouter([
{
path: "/",
element: <App />
},
{
path: "/resume",
element: <Resume />
}
]);
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<RouterProvider router={router} />
</StrictMode>
);and in my App.js file I used Link component like this
<Button
color="inherit"
onClose={handleClose}
>
<Link to="/resume">Resume</Link>
</Button>
CodePudding user response：
The issue it seems is that you aren't using react-router to its fullest. The Link component should be specifying a to prop that matches a URL pathname that you are rendering a Route component for. PortfolioContainer should be rendering the routes you are trying to link to from the Navbar component.
Example:
PortfolioContainer
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import About from "../pages/About";
import Portfolio from "../pages/Portfolio";
import Contact from "../pages/Contact";
import Resume from "../pages/Resume";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
export default function PortfolioContainer() {
return (
<BrowserRouter>
<div id="portfolioContainer">
<Navbar />
<Routes>
<Route path="/" element={<About />} />
<Route path="/resume" element={<Resume />} />
<Route path="/portfolio" element={<Portfolio />} />
<Route path="/contact" element={<Contact />} />
</Routes>
<Footer />
</div>
</BrowserRouter>
);
};
Navbar
...
<Link to="/">
About Me
</Link>
...
<Link to="/portfolio">
Portfolio
</Link>
...