无法读取未定义的属性（读取“路径名”）

Cannot read property ‘pathname’ of undefined in React

当我们没有在 React router 的组件to上设置 prop时，会出现错误“Cannot read properties of undefined (reading ‘pathname’)”。Link

要解决该错误，请将toLink 上的 prop 设置为特定路径，例如
<Link to="/">Home</Link>.

无法读取未定义的属性路径名

这是在 React 路由器中使用 Link 组件的最小示例。

应用程序.js


import React from 'react';
// 👇️ import Routes instead of Switch 👇️
import {Route, Link, Routes} from 'react-router-dom';

export default function App() {
  return (
    <div>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/about" element={<About />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
    </div>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

如果在测试使用 React 路由器的页面时出现错误，请确保location在Router组件上设置 prop 而不是
history.

应用程序测试.js


import {render} from '@testing-library/react';
import App from './App';
import {Router} from 'react-router-dom';

import {createMemoryHistory} from 'history';

test('renders react component', async () => {
  const history = createMemoryHistory();

  render(
    <Router location={history.location} navigator={history}>
      <App />,
    </Router>,
  );

  // 👇️ your tests...
  expect(screen.getByText(/you are home/i)).toBeInTheDocument();
});

如果您尝试访问pathname，请使用
useLocation挂钩。

应用程序.js


import React from 'react';
import {Route, Link, Routes, useLocation} from 'react-router-dom';

export default function App() {
  // 👇️ with React router
  const location = useLocation();

  console.log('hash', location.hash);
  console.log('pathname', location.pathname);
  console.log('search', location.search);

  return (
    <div>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/about" element={<About />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
    </div>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

确保将您的应用程序包装在文件Router中的组件中index.js
。

索引.js


import {createRoot} from 'react-dom/client';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// 👇️ wrap App in Router
root.render(
  <Router>
    <App />
  </Router>
);

用组件包装你的 React 应用程序的最佳位置Router是在你的index.js文件中，因为那是你的 React 应用程序的入口点。

一旦你的整个应用程序被一个组件包裹起来Router，你就可以在你的组件中的任何地方使用 React 路由器包中的任何钩子。