reactjs - 为什么 React Link 和 NavLink 不起作用？

Question

我有 main.js 和 Character.js。在 Character.js 中，我想使用 NavLink 元素，但在使用时出现错误。当我将 NavLink 更改为 div 时，它会呈现在页面上。你能告诉我问题是什么吗？我为此苦苦挣扎了一段时间。谢谢!

import { Routes, Route } from 'react-router-dom';
import { useState, useEffect } from 'react';
import Episodes from '../Episodes/Episodes';
import Characters from '../Characters/Characters';
import Locations from '../Locations/Locations';
import Home from '../Home/Home';

export default function Main() {
  const [characters, setCharacters] = useState([]);
  const [locations, setLocations] = useState([]);
  const [episodes, setEpisodes] = useState([]);

  useEffect(() => {
    (async function () {
      const resp = await fetch('https://rickandmortyapi.com/api/character');
      const data = await resp.json();
      setCharacters(data.results);
    })();
  }, []);

  return (
    <Routes>
      <Route
        path='/episodes'
        element={<Episodes episodes={episodes} />}
      ></Route>
      <Route
        path='/characters'
        element={<Characters list={characters} />}
      ></Route>
      <Route
        path='/locations'
        element={<Locations locations={locations} />}
      ></Route>
      <Route path='/' element={<Home />} />
    </Routes>
  );
}

import './characters.css';
import Character from '../Character/Character';
import { Link, NavLink, Route, Routes } from 'react-router-dom';

export default function Characters({ list }) {
  return (
    <>
      <div className='list'>
        <h2>List of characters</h2>
        {list.length === 0 && <p>No Character</p>}
        {list.map((item, idx) => (
          <div key={item.id}>
            <NavLink>{item.name}</NavLink>
          </div>
        ))}
      </div>
    </>
  );
}

Answer 1

NavLink 需要通过 to 属性指定 它链接到的位置。

Link

interface LinkProps
  extends Omit<
    React.AnchorHTMLAttributes<HTMLAnchorElement>,
    "href"
  > {
  replace?: boolean;
  state?: any;
  to: To;                              // <-- required prop!
  reloadDocument?: boolean;
}

NavLink

interface NavLinkProps
  extends Omit<
    LinkProps,                         // <-- extends LinkProps from above
    "className" | "style" | "children"
  > {
  caseSensitive?: boolean;
  children?:
    | React.ReactNode
    | ((props: { isActive: boolean }) => React.ReactNode);
  className?:
    | string
    | ((props: { isActive: boolean }) => string);
  end?: boolean;
  style?:
    | React.CSSProperties
    | ((props: {
        isActive: boolean;
      }) => React.CSSProperties);
}

例子:

<NavLink to={item.path}>{item.name}</NavLink>