Uncaught TypeError: Cannot read properties of undefined (reading 'pathname') : how to solve this router issue?

Question

"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>
    )
}

Answer 1

只看一下你分享的代码，你的导入有点乱。

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";

问题是您正在渲染两个路由器，它们不共享它们提供的路由上下文。换句话说，“路由器”处理来自链接的导航，但 Route 组件从嵌套的 BrowserRouter a.k.a 获取它们的路由上下文。 “切换”。

如果这不能完全解决您的问题，那么我们可能需要查看更多相关代码。先尝试上面的方法，让你的 App 组件进入正常工作状态。

Uncaught TypeError: Cannot read properties of undefined (reading 'pathname') : how to solve this router issue?

Uncaught TypeError: Cannot read properties of undefined (reading 'pathname') : how to solve this router issue?

reactjs

react-router-dom

react-hooks