为啥 React Link 和 NavLink 不起作用？

Posted 2023-03-25

【中文标题】为啥 React Link 和 NavLink 不起作用？

【英文标题】：Why doesn't work the React Link and NavLink?为什么 React Link 和 NavLink 不起作用？

【发布时间】：2022-01-18 23:33:47

【问题描述】：

我有 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>
    </>
  );

【参考方案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>

【参考方案2】：

您缺少 NavLink 的“to”道具

<NavLink to="/">item.name</NavLink> //or other location

另外，我认为您缺少路由器。

import  Routes, Route, BrowserRouter as Router  from "react-router-dom";


 <Router>
    <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>
  </Router>