"react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "5.2.0",
这是我的 App.js 文件
import React from "react"
import Navbar from "./components/Navbar"
import Main from "./components/Main"
import Details from "./components/Details"
import { BrowserRouter as Switch, Router, Route, Link } from "react-router-dom"
export default function App() {
return (
<Router>
<div className="container">
<header>
<ul>
<li><Link to="/navbar">Navbar</Link></li>
<li><Link to="/main">Home</Link></li>
<li><Link to="/details">Details</Link></li>
</ul>
<div>
<Switch>
<Route exact path="/navbar" component={Navbar} />
<Route exact path="/main" component={Main}/>
<Route exact path="/details" component={Details}/>
</Switch>
</div>
</header>
</div>
</Router>
)
}
最佳答案
只要浏览一下仅您共享的代码,您就已经把导入弄乱了一点。
import { BrowserRouter as Switch, Router, Route, Link } from "react-router-dom";
您已将 BrowserRouter
导入为 Switch
。我确定您打算将其导入为 Router
,并单独导入 Switch
。
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
问题是您正在渲染两个路由器,并且它们不共享它们提供的路由上下文。换句话说,“Router”正在处理来自链接的导航,但 Route
组件从嵌套的 BrowserRouter
又名“Switch”获取其路由上下文。 p>
如果这不能完全解决您的问题,那么我们可能需要查看更多相关代码。首先尝试上述操作,让您的 App
组件进入正确的工作顺序。
关于reactjs - 未捕获的类型错误 : Cannot read properties of undefined (reading 'pathname' ) : how to solve this router issue?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70698646/