无法读取路径名错误反应路由器dom

Question

App.jsx

import { useState } from 'react';
import './App.css';
import NewsContainer from './Components/NewsContainer';
import { Router, Routes, Route } from "react-router-dom"
function App() {
const [mode, setMode] = useState("light")
const changeMode = () => {
if (mode === "light") {
setMode("dark")
document.body.style.backgroundColor = "rgb(30 41 59)"
} else {
setMode("light")
document.body.style.backgroundColor = "white"
}
}
return (
<Router>
<div className='justify-evenly'>
<Routes>
<Route exact path="/" element={<NewsContainer key="general" mode={mode} changeMode={changeMode} category="general" />} />
<Route exact path='/sports' element={<NewsContainer key="sports" mode={mode} changeMode={changeMode} category="sports" />} />
<Route exact path='/buisness' element={<NewsContainer key="buisness" mode={mode} changeMode={changeMode} category="buisness" />} />
<Route exact path='/entertainment' element={<NewsContainer key="entertainment" mode={mode} changeMode={changeMode} category="entertainment" />} />
<Route exact path='/health' element={<NewsContainer key="health" mode={mode} changeMode={changeMode} category="health" />} />
</Routes>
</div>
</Router>
);
}
export default App;

Navbar.jsx

import { Link } from "react-router-dom";
function Navbar({ mode, changeMode }) {
return (
<div
className={`${mode === "light" ? "bg-gray-100" : "dark : bg-slate-900"} `}
>
<header className="text-gray-600 body-font">
<div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<li
className={`flex title-font font-medium list-none items-center text-${
mode === "light " ? "gray-900" : "white"
} mb-4 md:mb-0 cursor-pointer`}
>
<span
className={`ml-3 text-xl text-${
mode === "light" ? "black" : "white"
}`}
>
<Link to="/">Hind News</Link>
</span>
</li>
<nav className="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400 flex flex-wrap items-center text-base justify-center list-none cursor-pointer">
<li
className={`mr-5 hover:text-${
mode === "light" ? "dark : gray-900" : "white"
}`}
>
<Link to="/sport"> Sports </Link>
</li>
<li
className={`mr-5 hover:text-${
mode === "light" ? "dark : gray-900" : "white"
}`}
>
<Link to="/buisness">Buisness </Link>
</li>
<li
className={`mr-5 hover:text-${
mode === "light" ? " dark:gray-900" : "white"
}`}
>
<Link to="/entertainment">Entertainment </Link>
</li>
<li
className={`mr-5 hover:text-${
mode === "light" ? "dark : gray-900" : "white"
}`}
>
<Link to="/health">Health </Link>
</li>
</nav>
<input
type="text"
className="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0"
/>
<button className="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
Search
<svg
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className="w-4 h-4 ml-1"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
<div className="flex justify-center">
<div className="flex justify-center">
<div className="form-check form-switch">
<input
className="form-check-input appearance-none w-9 -ml-10 rounded-full float-left h-5 align-top bg-white bg-no-repeat bg-contain bg-gray-300 focus:outline-none cursor-pointer shadow-sm ml-60"
type="checkbox"
role="switch"
id="flexSwitchCheckDefault"
onClick={changeMode}
/>
<label
className={`form-check-label inline-block text-${
mode === "light" ? "gray-900" : "white"
} `}
htmlFor="flexSwitchCheckDefault"
>
{" "}
Switch Mode
</label>
</div>
</div>
</div>
</div>
</header>
</div>
);
}
export default Navbar;

控制台错误

未捕获类型错误：无法读取未定义的属性(正在读取"路径名")

上述错误发生在<Router>组件中：

at Router (http://localhost:3000/static/js/bundle.js:39615:15)
at App (http://localhost:3000/static/js/bundle.js:33:74)

考虑在树中添加错误边界以自定义错误处理行为。参观https://reactjs.org/link/error-boundaries到了解更多关于错误边界的信息。

Answer 1

你在里面有一个打字错误。

<Link to="/sport"> Sports </Link>

当在路线上时，它拼写为运动

<Route exact path='/sports' element={<NewsContainer key="sports" mode={mode} changeMode={changeMode} category="sports" />} />

希望它能解决

Answer 2

您可能希望使用BrowserRouter而不是Router，后者是Router的包装器。

Answer 3

问题

您正在导入和渲染低级别的Router组件，而不传递任何必需的道具。

import { Router, Routes, Route } from "react-router-dom"

路由器

declare function Router(
props: RouterProps
): React.ReactElement | null;
interface RouterProps {
basename?: string;
children?: React.ReactNode;
location: Partial<Location> | string; // <-- missing
navigationType?: NavigationType;
navigator: Navigator;                 // <-- missing
static?: boolean;
}

缺少location和navigator道具。该错误特别是由于缺少location道具，它是未定义的，因此代码无法访问`undefined的pathname。

解决方案

您几乎不需要手动渲染Router。相反，您应该呈现一个高级路由器(，例如BrowserRouter、HashRouter等)，该路由器实例化并维护历史引用，并将这些所需的道具传递给低级Router组件。

示例：

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";