JIYIK CN >

When we don’t set the to prop on the Link component of React router, we get the error “Cannot read property 'pathname' of undefined”. To fix the error, we need to toset the to prop on the link to a specific path, <Link to="/">首页</Link>e.g.

This is a minimal example of using the Link component in React routing.

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

If you encounter errors when testing pages that use React routing, make sure you are setting locationthe property on the router component instead of the history.

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>,
  );

  expect(screen.getByText(/you are home/i)).toBeInTheDocument();
});

If you are trying to access a pathname, you need to use the useLocation hook.

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

export default function App() {
  // 👇️ 使用 React 路由
  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>;
}

Make sure to wrap our application in a Router component in the index.js file.

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

// 在 Router 中封装 App
root.render(
  <Router>
    <App />
  </Router>
);

The best place to wrap your React application with a Router component is in the index.js file, since this is the entry point for your React application.

Once your entire app is wrapped in a Router component, you can use any hook from the React router package anywhere in your component.